jsGrid使用入门
原创蓝天上的一朵云 本文链接：https://blog.csdn.net/u012846041/article/details/82735811
jsGrid资源地址：
http://js-grid.com/，该资源地址提供了详细的demo、文档等资料信息
jsGrid是在jQuery基础上实现的表格插件，简单易用，该插件依赖jquery以及jquery-ui的样式文件；
jsGrid的引入使用，如下示意：
引入css：
<link type='text/css' rel='stylesheet' href='jsgrid.min.css' /> <link type='text/css' rel='stylesheet' href='jsgrid-theme.min.css' />
引入Js：
<script type="text/javascript" src="jsgrid.min.js"></script>
jsGrid通过配置属性的设定，完成基本使用信息设置，示例代码如下
$("#jsGrid").jsGrid({
"100%",
height: "400px",
filtering: true,
inserting: false,
editing: true,
sorting: true,
paging: true,
pageLoading: true,
pageSize: 8,
autoload: false,
deleteConfirm: "确认需要删除数据？",
loadMessage: "正在装载数据，请稍候......",
fields: [
{ name: "Name", type: "text", 150, validate: "required" },
{ name: "Age", type: "number", 50, validate: { validator: "range",param: [18,80]} },
{ name: "Address", type: "text", 200 },
{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ name: "Born", type: "date", title: "Born Date", },
{
type: "control",
modeSwitchButton: true,
editButton: false,
100,
headerTemplate: function () {
$button = $("<button>").attr("type", "button").text("Filter")
.on("click", function () {
$("#jsGrid").jsGrid("option", "filtering", !($("#jsGrid").jsGrid("option", "filtering")));
return false;
});
//return $("p").html("kkkkk");
return $("<button>").attr("type", "button").text("Add")
.on("click", function () {
dialog.showDetailsDialog("Add", {});
});
}
}
]
});
jsGrid的data配置项目，支持静态数据源的指定，通过controller属性的设置，支持动态从服务器端请求载入数据。controller是支持通过回调方式载入数据的对象，包含了四类方法：
{
loadData: $.noop,
insertItem: $.noop,
updateItem: $.noop,
deleteItem: $.noop
}
在上面的示例中，loadData表示从服务器端请求数据的方法，在上述示例中将暂定将该方法定义为空；insertItem表示从插入数据的方法，当完成数据编辑是可通过该方法向服务端提交数据；updateItem、deleteItem分别表示更改数据和删除数据的方法，上述方法均支持jQuery的延迟对象方法，通过异步的方式实现数据的增、删、改、查，当服务端完成数据操作并返回操作应答后获取响应结果。示例代码如下：
在dialoge对象中定义loadData方法：
var loadData = function (e) { //==============定义延迟加载 var d = $.Deferred(); //=================服务端分页需要将页面索引传递到服务端======================= pageSize = e.pageSize; pageIndex = e.pageIndex; $.ajax({ url: '/Grid/IndexData', type: 'post', dataType: 'json', contentType: 'application/json; charset=utf-8', data: JSON.stringify(datas) } ).done(function (e) { alert('load data successed'); //===========================服务端分页的话就没必要取子集了========================= subdata = e.slice(pageSize * (pageIndex - 1), pageSize * pageIndex); pagingdata = { data: subdata, itemsCount: e.length }; //============服务端完成时发出完成通知================== d.resolve(pagingdata); }).fail(function (e) { alert('load failed!'); }); //=============向loadData返回延迟加载方法=================== return d.promise(); };
设置jsGrid 中Controller的 loadData方法为对应对象的方法：
controller: {
loadData: dialog.loadData
},
设置jsGrid中loadData的响应函数：
//==============loadData延迟加载触发响应通知================== $("#jsGrid").jsGrid("loadData").done(function (e) { //================loadData事件在数据加载完毕且页面渲染完毕后触发==================== //================只有在绑定事件的对象已创建后添加事件才有实际作用================= $(".jsgrid-control-field").on("click", function () { alert("delete click!"); //=============取消事件冒泡========================= return false; }); });
jsGrid的行渲染：为一个函数，该函数返回包含tr标签的行信息，示例如下：
rowRenderer: function (item, itemIndex) { //var trs = {}; $row = undefined; $col = undefined; var colors = ""; //===============区分奇、偶行信息设置不同的背景行颜色================== switch (itemIndex % 2) { case 0: $row = $("<tr>").addClass("jsgrid-alt-row").css("background-color", "#FFE4C4"); colors = "#FFE4C4"; break; case 1: $row = $("<tr>").addClass("jsgrid-row").css("background-color", "#F0F0F0"); colors = "#F0F0F0"; break; } var j= 0; for (i in item) { //==============================获取在定义jsGrid对象时，在config中设置的fields信息========= width = $("#jsGrid").jsGrid("option", "fields")[j].width; $col = $("<td>").addClass('jsgrid-cell jsgrid-align-center').css("width", String(width)+"px").css("background-color", colors); $row.append($col.append(item[i])); j++; } $col = $("<td>").addClass('jsgrid-cell jsgrid-control-field jsgrid-align-center').css("width", "50px").css("background-color", colors); $row.append($col.append($("<input>").addClass("jsgrid-button jsgrid-delete-button").attr("title", "delete").attr("type","button"))); return $row; //$("table tr:nth-child(even)").css("background-color", "#FFE4C4"); //$("table tr:nth-child(odd)").css("background-color", "#F0F0F0"); },
在jsGrid中，表头渲染也采用类似的方式，具体见帮助文档======