EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。

第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

前台代码：

[html] view plain copy

<span style="font-size:18px;"><table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题"  data-options="  

                rownumbers:true,  

                singleSelect:true,  

                @*autoRowHeight:false,*@  

                pagination:true  

                @*pageSize:10*@">  

            <thead>  

                <tr>  

                    <th field="colum1">列1</th>  

                    <th field="colum2">列2</th>  

                    <th field="colum3">列3</th>  

                    <th field="colum4">列4</th>  

                    <th field="colum5">列5</th>  

                    <th field="colum6">列6</th>  

                </tr>  

            </thead>  

        </table></span>  

JS代码：

[javascript] view plain copy

<span style="font-size:18px;">(function ($) {  

    function pagerFilter(data) {  

        if ($.isArray(data) www.yongshiyule178.com/) {  // is array  

            data = {  

                total: data.length,  

                rows: data  

            }  

        }  

        var target = this;  

        var dg = $(target);  

        var state = dg.data('datagrid');  

        var opts = dg.datagrid('options');  

        if (!state.allRows) {  

            state.allRows = (data.rows);  

        }  

        if (!opts.remoteSort && opts.sortName) {  

            var names = opts.sortName.split(',');  

            var orders = opts.sortOrder.split(',');  

            state.allRows.sort(function (r1, r2) {  

                var r = 0;  

                for (var i = 0; i < names.length; i++) {  

                    var sn = names[i];  

                    var so = orders[i];  

                    var col = $(target).datagrid('getColumnOption', sn);  

                    var sortFunc = col.sorter || function (a, b) {  

                        return a == b ? 0 : www.hjdseo.cn (a > b ? 1 : -1);  

                    };  

                    r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);  

                    if (r != 0) {  

                        return r;  

                    }  

                }  

                return r;  

            });  

        }  

        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  

        var end = start + parseInt(opts.pageSize);  

        data.rows = state.allRows.slice(start, end);  

        return data;  

    }  

  

    var loadDataMethod = $.fn.datagrid.methods.loadData;  

    var deleteRowMethod = $.fn.datagrid.methods.deleteRow;  

    $.extend($.fn.datagrid.methods, {  

        clientPaging: function (jq) {  

            return jq.each(function (www.thd540.com) {  

                var dg = $(this);  

                var state = dg.data('datagrid');  

                var opts = state.options;  

                opts.loadFilter = pagerFilter;  

                var onBeforeLoad = opts.onBeforeLoad;  

                opts.onBeforeLoad = function (param) {  

                    state.allRows = null;  

                    return onBeforeLoad.call(this, param);  

                }  

                var pager = dg.datagrid('getPager');  

                pager.pagination({  

                    onSelectPage: function (pageNum, pageSize) {  

                        opts.pageNumber = pageNum;  

                        opts.pageSize = pageSize;  

                        pager.pagination('refresh', {  

                   
4000
        pageNumber: pageNum,  

                            pageSize: pageSize  

                        });  

                        dg.datagrid('loadData', state.allRows);  

                    }  

                });  

                $(this).datagrid('loadData', state.data);  

                if (opts.url) {  

                    $(this).datagrid('reload'www.mhylpt.com);  

                }  

            });  

        },  

        loadData: function (jq, data) {  

            jq.each(function () {  

                $(this).data('datagrid').allRows = null;  

            });  

            return loadDataMethod.call($.fn.datagrid.methods, jq, data);  

        },  

        deleteRow: function (jq, index) {  

            return jq.each(function () {  

                var row = $(this).datagrid('getRows')[index];  

                deleteRowMethod.call($.fn.datagrid.methods, $(this), index);  

                var state = $(this).data('datagrid');  

                if (state.options.loadFilter == pagerFilter) {  

                    for (var i = 0; i < state.allRows.length; i++) {  

                        if (state.allRows[i] == row) {  

                            state.allRows.splice(i, 1);  

                            break;  

                        }  

                    }  

                    $(this).datagrid('loadData', state.allRows);  

                }  

            });  

        },  

        getAllRows: function (jq) {  

            return jq.data('datagrid').allRows;  

        }  

    })  

})(jQuery);</span>  

[javascript] view plain copy

<span style="font-size:18px;">    $.ajax({  

        type: "get",   //AJAX提交方式  

        url: "路径",  

        datatype: "json",  

        data: "userid=" + "id"+ "&username=" + "name",    //向后台传递参数，无需传递参数就可以删除  

        success: function (data) {  

            var rows = [];  

             

            for (var i = 0; i < data.length; i++) {      //data是返回值的集合  

                rows.push({                              //把data数据对应的值压到rows对应数组中  

<span style="white-space:pre">      <www.qianhuiyule1.com /span>    colum1: data[i].userid,  

                    colum2: data[i].leve,  

                    colum3: data[i].Username,  

                    colum4: data[i].Tel,  

                    colum5: data[i].Mail,  

                    colum6: data[i].Explain  

                });  

            }  

            $('#dg').datagrid({ data: rows }).datagrid('clientPaging');  

        }, error: function (www.niucaiyule1.cn) {                       //执行出错时执行的方法  

            $.messager.alert("操作提示", "表格失败，请联系管理员！", "warning");  

        }  

    });</span>  

需要绑定表格时调用AJAX方法，AJAX执行完后会自动调用显示数据方法，表格数据就显示出来了

第二种：直接在前台和JS设置好列名，自动绑定

前台代码：

[html] view plain copy

<span style="font-size:18px;">           <table id="dg" class="easyui-datagrid" title="需要显示表格标题 " data-options="                  

                rownumbers:true,  

                singleSelect:true,  

                autoRowHeight:false,  

                pagination:true,  

                ">  

                <thead>  

                    <tr>  

                        <th data-options="field:'colum1',align:'center'">列名1</th>  

                        <th data-options="field:'colum2',align:'center'">列名2</th>  

                        <th data-options="field:'colum3',align:'center'">列名3</th>  

                        <th data-options="field:'colum4',align:'center'">列名4</th>  

                        <th data-options="field:'colum5',align:'center'">列名5</th>  

                        <th data-options="field:'colum6',align:'center'">列名6</th>  

                    </tr>  

                </thead>  

            </table></span>  

JS代码：

[javascript] view plain copy

<span style="font-size:18px;">    $('#dg').datagrid({  

        url: '路径?Name=' + Name + "&combox=" + combox,   //设置访问后台路径和传递参数，如果没有参数可以删除  

        dataType: 'json',  

        width: "100%", //宽度  

        striped: true, //把行条纹化（奇偶行背景色不同）  

        idField: 'quesID', //标识字段  

        loadMsg: '正在加载用户的信息.......', //从远程站点加载数据是，显示的提示消息  

        pagination: true, //数据网格底部显示分页工具栏  

        singleSelect: false, //只允许选中一行  

        pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表  

        pageSize: 10, //初始化页面尺寸（默认分页大小）  

        pageNumber: 1, //初始化页面（默认显示第一页）  

        beforePageText: '第', //页数文本框前显示的汉字   

        afterPageText: '页 共 {pages} 页',  

        displayMsg: '第{from}到{to}条，共{total}条',  

        columns: [[ //每页具体内容  

                    { field: 'colum1', title: '标题1', width: "13%", align: 'center', editor: 'text' },  

                    { field: 'colum2', title: '标题2', width: "13%", align: 'center', editor: 'text' },  

                    { field: 'colum3', title: '标题3', width: "13%", align: 'center', editor: 'text' },  

                    { field: 'colum4', title: '标题4', width: "13%", align: 'center', editor: 'text' },  

                    { field: 'colum5', title: '标题5', width: "13%", align: 'center', editor: 'text' },  

                    { field: 'colum6', title: ' 标题6 ', width: "13%", align: 'center', editor: 'text' },  

        ]],  

  

        onLoadSuccess: function (data) {  

  

           //表格加载成功后执行的代码，如果不需要可以删除  

        }  

    })  

</span>  

把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了

顶

0

 

踩

0