當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS Grid插件使用

發(fā)布時(shí)間：2023/12/14 javascript 26 豆豆

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

1. 傳送門：js-grid官網(wǎng)

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. 擴(kuò)展1 關(guān)于Controller

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

loadData 查

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

pageLoading為true時(shí)，filter有pageSize和pageIndex兩個(gè)參數(shù)，sorting為true時(shí)，filter有sortFiled和sortOrder兩個(gè)參數(shù)，return一個(gè)表格加載的data或者當(dāng)分頁(yè)啟動(dòng)時(shí)，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用于更新表數(shù)據(jù)，否則以提交更改的item作為更新。

deleteItem 刪

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

7. 擴(kuò)展2 關(guān)于type

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

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

number：

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

select：

{align: "center",autosearch: true,items: [], //用于生成器的數(shù)組valueField: "", //items中映射data字段的值的字段，參照開頭例子textFiled: "", //data中將被items替換顯示的字段seletedIndex: -1, //默認(rèn)選擇的indexvalueType: "number|string", 數(shù)據(jù)類型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",... //各種提示}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： centos7—DNS域名系统
下一篇：匹配中国人姓名的JavaScript正则