<p>Type hier een boodschap die u in de webpagina wilt zetten</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">klik hier voor Heads.</button><br>
<div id="div-Result"></div>
我决定应用名为 jsGrid 的 jQuery插件，以便为我的HTML表格创建网格，但是由于某些原因，我在加载时我的HTML表单，出现以下错误消息：表单失败：$（...）。jsGrid不是函数。
我完全遵循了该网站的入门步骤： http://js-grid.com/getting-started/
我的代码 ：
<!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><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>
有人知道吗，为什么我要收到此错误消息？
谢谢， 史蒂夫
答案 0 :(得分：0)
看起来您还没有将源代码本身嵌入文档中：
<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>
您是否在执行代码之前嵌入了这些？