我正在研究Tabulator插件here的基本示例。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Storage & Spares</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
<script type = "text/javascript">
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "https://raw.githubusercontent.com/conormc93/db/master/db.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
$("#table_id").tabulator({
height:205,
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Picture", field:"Picture", width:150},
{title:"Pins", field:"Pins"},
{title:"Size", field:"Size"},
{title:"Supplier", field:"Supplier"},
{title:"Order Code", field:"Order Code"},
{title:"Manufacturer", field:"Manufacturer"},
{title:"Part Number", field:"Part Number"},
{title:"Description", field:"Description"},
{title:"Link", field:"Link"},
{title:"Location", field:"Location"},
{title:"Catagory", field:"Catagory"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
$("#table_id").tabulator("setData", json);
</script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<img alt="logo" src= "C:/Users/cmcgrat1/Website/images/logo.png">
</div>
<div id="menu">
<ul>
<li><a href="C:/Users/cmcgrat1/Website/index.html" accesskey="1" title="">Home</a></li>
<li><a href="C:/Users/cmcgrat1/Website/spares.html" accesskey="2" title="">Spares</a></li>
<li class="current_page_item"><a href="C:/Users/cmcgrat1/Website/storage.html" accesskey="3" title="">Storage</a></li>
<li><a href="#" accesskey="4" title="">Links</a></li>
<li><a href="#" accesskey="5" title="">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="table_id"></div>
<div class="modal fade" id="addItemForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Add Spare Item Form</h4>
</div>
<div class="modal-body mx-2">
<form action="test.php" method="POST">
<div class="form-row">
<div class="form-group col-md-6">
<label>Pins/Length</label>
<input type="number" name="pins_length" class="form-control" min=0 placeholder=" ">
</div>
<div class="form-group col-md-6">
<label>Size</label>
<input type="text" name="size" class="form-control" placeholder=" ">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Supplier</label>
<input type="text" name="supplier" class="form-control" list="suppliers_list" />
<datalist id="suppliers_list">
<option selected>Farnell</option>
<option>RS</option>
<option>Phoenix Contact</option>
<option>Radionics</option>
<option>Vision ID</option>
<option>Connector Solutions Ltd.</option>
<option>ITM/LCOM</option>
<option>PC Engines/MS Distribution</option>
<option>Valeo</option>
</datalist>
</div>
<div class="form-group col-md-6">
<label>Order Code</label>
<input type="number" name="order_code" class="form-control" min=0 placeholder=" ">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Manufacturer</label>
<input type="text" name="manufacturer" class="form-control" list="manufacturers_list" />
<datalist id="manufacturers_list">
<option>....</option>
<option>....</option>
<option>....</option>
<option>....</option>
</datalist>
</div>
<div class="form-group col-md-6">
<label>Part Number</label>
<input type="text" name="part_number" class="form-control" id="inputCity"></br>
</div>
</div>
<div class="form-row">
<label>Location</label></br>
<div class="form-group col-md-4">
<label>Section</label>
<select id="section" name="section" class="form-control">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
<option>K</option>
<option>L</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Row</label>
<select id="row" name="row" class="form-control">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="form-group col-md-4">
<label>Column</label>
<select id="column" name="column" class="form-control">
<option selected>1</option>
<option>2</option>
<option>3</option>
</select></br>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Link</label>
<input type="url" class="form-control" name="form_url" placeholder="https://www.example.com">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Picture</label>
<input type="file" class="form-control" name="picture" placeholder=" ">
</div>
<div class="form-group col-md-6">
<label>Catagory</label>
<select id="catagory" name="catagory" class="form-control">
<option selected>Connectors & Accessories</option>
<option>Logic & Resistors</option>
<option>Nuts & Bolts</option>
<option>Tools</option>
<option>Consumables</option>
<option>Cable Assemblies</option>
<option>Test Equipment</option>
<option>Run In</option>
<option>Spares</option>
<option>Benetel</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Description</label>
<textarea class="form-control" name="description" rows="3"></textarea>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary">Add Item</button>
</form>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#addItemForm">Add Spare Item Form</a>
</div>
<div id="copyright" class="container">
<p>© Valeo. All rights reserved. | Design by <a href="http://google.com" rel="nofollow">Conor McGrath</a>.</p>
</div>
</body>
</html>
我收到错误t.widget is not a function和$(...).tabulator is not a function。
据我了解，这通常是脚本文件写入顺序的问题。我也尝试过重新排列脚本标签。
我的问题是，我尝试初始化插件的方式是否有错误。
答案 0 :(得分：1)
问题在于您仅包含jQuery源，还需要在项目中包含jQuery-Ui源。
好消息是Tabulator 4.0现已推出，不再依赖jQuery，因此您可以直接使用它
Checkout The Tabulator Website For Info
我希望对您有帮助