javascript 表格预览

如果你想在你的网站中使表格更加美观、有趣，那么javascript表格预览功能可以满足你的需求。

JavaScript表格预览可以非常直观地展示出表格中的数据，供用户快速了解表格总体数据。以下是一些JavaScript表格预览库的应用实例：

<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@4.8.6/dist/js/tabulator.min.js"></script><div id="example-table"></div><script>//define datavar tabledata = [{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:""},{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982"},{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:{"value":"yes"}},{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},];//define tablevar table = new Tabulator("#example-table", {data:tabledata, //assign data to tablelayout:"fitDataStretch", //fit data and columns to width of table (optional)columns:[ //Define Table Columns{title:"Name", field:"name", width:150},{title:"Age", field:"age", align:"left", formatter:"progress"},{title:"Favourite Color", field:"col"},{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},{title:"Cheese Preference", field:"cheese", sorter:"boolean", align:"center", formatter:"tickCross"},],});</script>

上述例子中，我们使用了Tabulator库来实现表格预览功能。要在你的网站中使用该例子，需要在你的HTML文件中引入Tabulator库，并定义相应的表格数据和表格布局，最后使用Tabulator库生成表格即可。

除了Tabulator，还有其他一些JavaScript表格预览库，例如JqGrid和DataTables，其中JqGrid支持分页功能，而DataTables支持对表格进行排序、搜索等。

以下是JqGrid的一个例子：

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" /><link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" /><script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/jqgrid/5.4.0/js/i18n/grid.locale-en.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/jqgrid/5.4.0/js/jquery.jqGrid.min.js"></script><table id="jqGrid"></table><div id="jqGridPager"></div><script>$(document).ready(function() {var mydata = [{ id: 1, name: 'Peter', age: 25 },{ id: 2, name: 'John', age: 45 },{ id: 3, name: 'Andrew', age: 22 }];$("#jqGrid").jqGrid({data: mydata,datatype: "local",colModel: [{ label: 'ID', name: 'id', width: 75, key: true },{ label: 'Name', name: 'name', width: 150 },{ label: 'Age', name: 'age', width: 150 },],pager: "#jqGridPager",rowNum: 10,rowList: [10,20,30],sortname: 'id',viewrecords: true,sortorder: "asc",caption: "JqGrid Example"})});</script>

在上述例子中，我们使用了JqGrid库来实现表格预览功能。要在你的网站中使用该例子，需要在你的HTML文件中引入JqGrid库，并定义相应的表格数据、表格列名和分页设置，最后使用JqGrid库生成表格即可。

总的来说，通过使用JavaScript表格预览库，我们可以为我们的网站带来更加美观、功能更加丰富的表格显示效果。无论是想要展示数据、查询数据还是对数据进行排序，JavaScript表格预览库都可以为我们提供非常好的实现方案。

上一篇：javascript三种方式

下一篇：javascript 装饰者模式