表单失败：$(...).jsGrid不是函数
表单失败：$(...).jsGrid不是函数
提问于 2018-07-01 23:54:40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Insert products and specifications</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <!-- We include Bootstrap from a CDN (Content Delivery Network). -->
<link type="text/css" rel="stylesheet" href="jsgrid.min.css" /> <!-- We point to the external css stylesheet file named "jsgrid.min.css". -->
<link type="text/css" rel="stylesheet" href="jsgrid-theme.min.css" /> <!-- We point to the external css stylesheet file named "jsgrid-theme.min.css". -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- We get the complete "script" tag including Subresource "Integrity" attribute from the jQuery CDN domain. -->
<script type="text/javascript" src="jsgrid.min.js"></script> <!-- We point to the external script file named "jsgrid.min.js". -->
</head>
我决定应用一个名为jQuery的表格插件失败，以便为我的HTML Table失败创建一个网格，但是由于某些原因，当我加载html表单时，我收到这个错误消息：Form ：$(...).jsGrid is a function。
我完全按照这个站点的Getting started steps操作：http://js-grid.com/getting-started/
我的代码
<script cam-script type="text/form-script">
var product = $scope.product = []; // Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $scope of the form as a variable named "product".
$scope.addProduct = function () { // We make a function named "addProduct".
var product = {}; // We add a new "product" to the Array.
product.Category = $scope.Category;
product.Description = $scope.Description;
if (!!$scope.camForm.fields[0].element[0].files[0]) { // If the file is uploaded,
product.Details = $scope.camForm.fields[0].element[0].files[0].name; // it returns file's "name".
} else { // If the file is not uploaded,
return; // it returns "undefined".
}
product.Price = $scope.Price;
$scope.product.push(product); // We use the value of the "product" input field to add a new "product" to the Array.
$scope.Category = ""; // We clear the TextBox "Κατηγορία".
$scope.Description = ""; // We clear the TextBox "Περιγραφή".
$scope.Details = ""; // We clear file's "name".
$scope.Price = ""; // We clear the TextBox "Τιμή (€)".
};
$scope.clear = function () { // We make a function named "clear".
angular.element("input[type='file']").val(null);
};
$scope.removeProduct = function (index) { // We make a function named "removeProduct".
var category = $scope.product[index].Category; // We find product's "Category" using "index" from the Array and binds it to the current AngularJS $scope of the form as a variable named "category".
$scope.product.splice(index, 1); // We use an "index" to remove a "product" from the Array.
}
$scope.isAddFormValid = function () { // We make a function named "isAddFormValid".
return ($scope.Category &&
$scope.Description &&
$scope.camForm.fields[0].element[0].files[0] &&
$scope.Price) ? true : false; // If all of the 4 input fields of variable "product" are filled in, the "isAddFormValid" function (expression) returns "true", otherwise the function returns "false".
}
camForm.on('form-loaded', function() { // We hook into the lifecycle of Camunda SDK JS Form.
camForm.variableManager.createVariable ({ // We "create" (declare) a new "process" variable
name:'product', // named 'product' and
type:'json', // provide as type information 'json' used for serialization.
value:product
});
});
camForm.on('submit', function(evt) { // We hook into the lifecycle of Camunda SDK JS Form.
if (product.length<1) { // If no any "product" is added,
evt.submitPrevented = true; // an event handler prevents the form from being submitted by setting the property "submitPrevented" to 'true'.
}
});
var category = [
{ Name: "", Id: 0 },
{ Name: "Desktop", Id: 1 },
{ Name: "Laptop", Id: 2 },
{ Name: "Tablet", Id: 3 },
{ Name: "Οθόνη Υπολογιστή", Id: 4 },
{ Name: "Οθόνη Προβολής", Id: 5 },
{ Name: "Εκτυπωτής laser", Id: 6 },
{ Name: "Φωτοτυπικό Μηχάνημα", Id: 7 },
{ Name: "Scanner", Id: 8 },
{ Name: "UPS", Id: 9 },
{ Name: "Διαδικτυακή Συσκευή Αποθήκευσης", Id: 10 },
{ Name: "Εξωτερικός Σκληρός Δίσκος", Id: 11 },
{ Name: "Προτζέκτορας", Id: 12 },
{ Name: "Βιντεοπροτζέκτορας", Id: 13 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: product,
fields: [
{ name: "Κατηγορία", type: "select", items: category, valueField: "Id", textField: "Name" },
{ name: "Περιγραφή", type: "text" },
{ name: "Λεπτομέρειες", type: "text" },
{ name: "Τιμή (€)", type: "number", width: 75 },
{ type: "control" }
]
});
</script><h2><b>Λίστα Προϊόντων</b></h2> <!-- We set the heading of the HTML Table. -->
<div id="jsGrid"> <!-- We add a "<div>" for the grid. -->
<table style="width:100%;">
<thead> <!-- We group the "header" content in the HTML Table. -->
<tr> <!-- The "header" content of the HTML Table is not repeated. -->
<th>Κατηγορία</th>
<th>Περιγραφή</th>
<th>Λεπτομέρειες</th>
<th style="width:75px;">Τιμή (€)</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in product track by $index"> <!-- The HTML Table is populated from the JSON Array "product", using a "ng-repeat" directive which is assigned to each row of the Table in order to repeat all the objects of the Array. -->
<tr> <!-- Each row of the HTML Table consists of 4 HTML fields and 1 button. -->
<td><input type="text" value="{{x.Category}}" /></td>
<td style="width:100%; padding:0px 8px 0px 0px"><input style="width:100%;" type="text" value="{{x.Description}}" /></td>
<td><input type="text" value="{{x.Details}}" /></td>
<td><input style="width:75px;" type="number" value="{{x.Price}}" /></td>
<td><input type="button" ng-click="removeProduct($index)" value="Remove" /></td> <!-- The "ng-click" directive is assigned to the "Remove" button and calls the function named "removeProduct" with the current "$index" when this button is clicked. -->
</tr>
</tbody>
</table>
</div>
<hr> <!-- We separate the HTML content of the page. -->
<div>
<h2><b>Καταχώρησε νέο προϊόν</b></h2> <!-- We set the heading of the HTML Form. -->
<div class="row"> <!-- We set the "1st row" of the HTML Form. -->
<div class="col-md-6"> <!-- We use "md" for "medium" screen devices of width "equal to or greater than" 992px and "6" for adding 6 columns. -->
<div class="form-group"> <!-- We use "form-group" for optimum spacing. -->
<label class="control-label" for="category">Επίλεξε Κατηγορία:</label>
<div class="controls">
<input list="category" name="categories" ng-model="Category" /> <!-- When the value of the input field "Επίλεξε Κατηγορία" changes, is bound to the created variable "Category" in AngularJS by the "ng-model" directive. -->
<datalist id="category">
<option value="Desktop">
<option value="Laptop">
<option value="Tablet">
<option value="Οθόνη Υπολογιστή">
<option value="Οθόνη Προβολής">
<option value="Εκτυπωτής laser">
<option value="Φωτοτυπικό Μηχάνημα">
<option value="Scanner">
<option value="UPS">
<option value="Διαδικτυακή Συσκευή Αποθήκευσης">
<option value="Εξωτερικός Σκληρός Δίσκος">
<option value="Προτζέκτορας">
<option value="Βιντεοπροτζέκτορας">
</datalist>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="description">Περιγραφή</label>
<div class="controls">
<input id="description" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" ng-model="Description" /> <!-- When the value of the input field "Περιγραφή" changes, is bound to the created variable "Description" in AngularJS by the "ng-model" directive. -->
</div>
</div>
<div class="form-group">
<label class="control-label" for="details">Λεπτομέρειες</label>
<div class="controls">
<input id="details"
type="file"
cam-variable-name="Details"
cam-variable-type="File"
cam-max-filesize="10000000" ng-model="Details" /> <!-- When the value of the input field "Λεπτομέρειες" changes, is bound to the created variable "Details" in AngularJS by the "ng-model" directive. -->
</div>
</div>
<div class="form-group">
<label class="control-label" for="price">Τιμή (€)</label>
<div class="controls">
<input style="width:75px;" id="price" type="number" min="0" ng-model="Price" /> <!-- When the value of the input field "Τιμή (€)" changes, is bound to the created variable "Price" in AngularJS by the "ng-model" directive. -->
</div>
</div>
<div class="controls">
<input type="button" ng-click="addProduct();clear()" ng-show="isAddFormValid()" value="Add" /> <!-- The "ng-show" directive shows the input element ("Add" button) only if the "isAddFormValid()" function (expression) returns "true". The "ng-click" directive is assigned to the "Add" button and calls the functions named "addProduct()" and "clear()" when this button is clicked. -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
有没有人知道我为什么要接受这个错误信息
谢谢，史蒂夫
回答 1
Stack Overflow用户
发布于 2018-07-02 00:23:45
看起来您还没有将源代码本身嵌入到您的文档中：
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>您是否在代码开始执行之前嵌入了这些代码？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51124820
复制相关文章
相似问题