當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS Grid插件使用

發布時間：2023/12/14 javascript 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS Grid插件使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 傳送門：js-grid官網

2. 引入css：

3. 引入Js：

4.配置

5. 完整代碼如下：
jquery-3.1.1.min.js? 可去自行下載，其他jQuery.min.js也行

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><link type="text/css" rel="stylesheet" href="css/jsgrid.min.css" /><link type="text/css" rel="stylesheet" href="css/jsgrid-theme.min.css" /><script type="text/javascript" src="js/jsgrid.min.js"></script> </head> <body><table id="jsGrid"></table><div id="list2"></div><script>var clients = [{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }];var countries = [{ Name: "", Id: 0 },{ Name: "United States", Id: 1 },{ Name: "Canada", Id: 2 },{ Name: "United Kingdom", Id: 3 },{ Name: "China", Id: 4 }];$("#jsGrid").jsGrid({width: "100%",height: "400px",inserting: true,editing: true,sorting: true,paging: true,data: clients,fields: [{ name: "Name", type: "text", width: 150, validate: "required" },{ name: "Age", type: "number", width: 50 },{ name: "Address", type: "text", width: 200 },{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },{ type: "control" }]});</script> </body> </html>

6. 擴展1 關于Controller

如果都返回jQuery promise，表格將支持異步通知狀態，例如刪除，會在刪除ajax回調成功時做出反應。var promise = $.ajax({}); 那么promise會有done方法，done方法在ajax請求完成時得到執行。所謂promise()作為一個對象的活動集合，ajax將直接返回promise的對象，其它支持的類型可以調用諸如$(“div”).promise()的方法。

loadData 查

loadData: function(filter){return $.ajax({type: "get",url: "items",data: filter});}

pageLoading為true時，filter有pageSize和pageIndex兩個參數，sorting為true時，filter有sortFiled和sortOrder兩個參數，return一個表格加載的data或者當分頁啟動時，return如下形式：

{dataitemsCount}

insertItem 增

insertItem: function(item){return $.ajax({type: "post",url: "items",data: item});}

updateItem 改

updateItem: function(item){return $.ajax({type: "put",url: "items",data: item});}

返回已更改的item用于更新表數據，否則以提交更改的item作為更新。

deleteItem 刪

deleteItem: function(item){return $.ajax({type: "delete",url: "items",data: item});}

7. 擴展2 關于type

text，filed支持多余的以下字段：

readOnly: false, //是否只讀，true時，即使編輯也將不可更改。autosearch: true, //原意應該是搜索時按回車自動定位，但測試貌似沒有生效，未知。

number：

sorter: "number", //使用number分類align: "right", //居右readOnly: false

select：

{align: "center",autosearch: true,items: [], //用于生成器的數組valueField: "", //items中映射data字段的值的字段，參照開頭例子textFiled: "", //data中將被items替換顯示的字段seletedIndex: -1, //默認選擇的indexvalueType: "number|string", 數據類型readOnly: false}

checkbox：

{sorter:"number",align:"center",autosearch: true}

control 非表單字段，該列顯示各種控制按鈕：

{editButton: true,deleteButton: true,clearFilterButton: true,modeSwitchButton: true,align: "center",width: 50,filtering: false,inserting: false,editing: false,sorting: false,searchModeButtonTooltip: "Switch to searching", //搜索按鈕懸停提示insertModeButtonTooltip: "Switch to insertin", //插入按鈕懸停提示editButtonTooltip: "Edit",... //各種提示}

總結

以上是生活随笔為你收集整理的JS Grid插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： centos7—DNS域名系统
下一篇： gradle idea java ssm