jsGrid使用入门

jsGrid资源地址：

http://js-grid.com/，该资源地址提供了详细的demo、文档等资料信息

jsGrid是在jQuery基础上实现的表格插件，简单易用，该插件依赖jquery以及jquery-ui的样式文件；

jsGrid的引入使用，如下示意：

引入css：

引入Js：

 jsGrid通过配置属性的设定，完成基本使用信息设置，示例代码如下：

$("#jsGrid").jsGrid({
            width: "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", width: 150, validate: "required" },
                { name: "Age", type: "number", width: 50, validate: { validator: "range",param: [18,80]}  },
                { 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 },
                { name: "Born", type: "date", title: "Born Date", },
                {
                    type: "control",
                    modeSwitchButton: true,
                    editButton: false,
                    width: 100,
                    headerTemplate: function () {
                        $button = $("").attr("type", "button").text("Filter")
                            .on("click", function () {
                                $("#jsGrid").jsGrid("option", "filtering", !($("#jsGrid").jsGrid("option", "filtering")));
                                return false;
                            });
                        //return $("p").html("kkkkk");
                     
                        return $("").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 = $("").addClass("jsgrid-alt-row").css("background-color", "#FFE4C4");
                        colors = "#FFE4C4";
                        break;
                    case 1:
                        $row = $("").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 = $("").addClass('jsgrid-cell jsgrid-align-center').css("width", String(width)+"px").css("background-color", colors);                    
                    $row.append($col.append(item[i]));
                    j++;
                }

                $col = $("").addClass('jsgrid-cell jsgrid-control-field jsgrid-align-center').css("width", "50px").css("background-color", colors);
                $row.append($col.append($("").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中，表头渲染也采用类似的方式，具体见帮助文档======