jQuery LigerUI API ligerGrid

描述:

• 1,支持本地数据和服务器数据(配置data或者url)
• 2,支持排序和分页(包括Javascript排序和分页)
• 3,支持列的“显示/隐藏”
• 4,支持明细行(表格内嵌)
• 5,支持汇总行
• 6,支持单元格模板
• 7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)
• 8,支持树表格
• 8,支持分组
• 8,支持多表头

例子:

$("#maingrid4").ligerGrid({
                checkbox: true,
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
                { display: '公司名', name: 'CompanyName', minWidth: 60 },
                { display: '联系名', name: 'ContactName', width: 50,align:'left' }, 
                { display: '联系名', name: 'ContactName', minWidth: 140 },
                 { display: '联系名', name: 'ContactName', minWidth: 140 }, 
                 { display: '联系名', name: 'ContactName', minWidth: 140 }, 
                 { display: '联系名', name: 'ContactName', minWidth: 140 },
                { display: '城市', name: 'City' }
                ], dataAction: 'server',pageSize:30,
                url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID', 
                width: '100%',height:'100%'
            });

var grid;
        $(function ()
        {
            grid = $("#maingrid4").ligerGrid({
                checkbox: true,
                columns: [
                { display: '主键', name: 'CustomerID', align: 'left', width: 120 },
                { display: '公司名', name: 'CompanyName', minWidth: 60 },
                { display: '联系名', name: 'ContactName', width: 50, align: 'left' }, 
                { display: '城市', name: 'City' }
                ], dataAction: 'server', pageSize: 30,
                url: "../../service/NwindDataHandler.ashx?View=Customers", sortName: 'CustomerID',
                width: '100%', height: '100%',
                onCheckRow: function (checked,data,rowindex,rowobj)
                {
                    checked && $.ligerDialog.alert('选择的是'+data.CustomerID);
                }
            }); 
            $("#pageloading").hide();
        });
        function getCheckedData()
        {
            var rows = grid.getCheckedRows();
            var str = "";
            $(rows).each(function ()
            {
                str += this.CustomerID + ",";
            });
            $.ligerDialog.alert('选择的是' + str);
        }

var jsonObj = {};
            jsonObj.Rows = [
                { id: 3, name: "林三", sex: "男", birthday: "1989-01-12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },
                { id: 33, name: "啊三", sex: "男", birthday: "1981-12-12" },
                { id: 34, name: "表三", sex: "男", birthday: "1983-01-12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989-01-12" },
                { id: 33, name: "成三", sex: "男", birthday: "1989-11-23" },
                { id: 34, name: "都三", sex: "女", birthday: "1989-04-12" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999-05-15" },
                { id: 344, name: "林三", sex: "男", birthday: "1969-02-21" },
                { id: 1, name: "王开", sex: "男", birthday: "1989-01-12" }
            ];
            $("#maingrid").ligerGrid({
                columns: [
                { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,
                    render: function (row)
                    {
                        var html = '';
                        return html;
                    },
                    headerRender: function (column)
                    {
                        var html = '';
                        return html;
                    }
                },
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name', width: 50 },
                { display: '性别', name: 'sex', width: 50, isSort: false
                },
                { display: '生日', name: 'birthday', type: 'date', width: 100 },
                {
                    display: '模板列', isAllowHide: false,
                    render: function (row)
                    {
                        var html = '编辑';
                        return html;
                    }
                }
                ],width:'100%',
                data: jsonObj,
                url: "../Default.aspx", pkName: 'id',
                pageSizeOptions: [5, 10, 15, 20],
                onAfterShowData: function (grid)
                {
                    if ($.fn.ligerCheckBox)
                        $(".l-grid-body input:checkbox,.l-grid-hd-cell input:checkbox", grid).ligerCheckBox({ css: { marginTop: 3} })
                }
            });

返回值:

{$.ligerui.controls.Grid} Grid组件管理器