关闭

EasyUI的DataGrid绑定Json数据源

标签: .netajaxjavascriptdatagrideasyui
3988人阅读 评论(10) 收藏 举报
分类:

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

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

前台代码:

<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>
JS代码:

(function ($) {
    function pagerFilter(data) {
        if ($.isArray(data)) {	// 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 : (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 () {
                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', {
                            pageNumber: pageNum,
                            pageSize: pageSize
                        });
                        dg.datagrid('loadData', state.allRows);
                    }
                });
                $(this).datagrid('loadData', state.data);
                if (opts.url) {
                    $(this).datagrid('reload');
                }
            });
        },
        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);

    $.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对应数组中
		    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 () {                       //执行出错时执行的方法
            $.messager.alert("操作提示", "表格失败,请联系管理员!", "warning");
        }
    });

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


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

前台代码:

           <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>

JS代码:

    $('#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) {

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

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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

EasyUI_datagrid实现动态加载列并为其绑定数据

最近项目中遇到了这么一个需求,在datagrid中显示的数据需要动态的加载,也就是说表格中显示的列是不固 定的,显示的列的名称和列的数量都是不固定的,这些数据都是需要我们从后台拿来数据然后在动态的绑...
  • u013045437
  • u013045437
  • 2016-03-06 23:24
  • 4693

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: [html]...
  • li123128
  • li123128
  • 2018-01-06 13:12
  • 93

EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: ...
  • PRIMEFJT
  • PRIMEFJT
  • 2018-01-12 20:36
  • 11

Jquery easyui从零单排之datagrid数据绑定

自己写的前端,感觉太丑了,所以在网上找到了jquery easyui,样式也蛮漂亮的,闲暇之余就开始慢慢学习。 官网(jquery easyui官网)上也是大致描述了一些东西,但是绝对不够全面,网上其...
  • yangmingxing980
  • yangmingxing980
  • 2015-12-08 16:34
  • 3134

c# datagridvew绑定数据源

经过各种百度谷歌搜索,终于总结出一下几种绑定datagridview数据源的方法: 1.说明: 俗称数据操作多面手,是Microsoft Visual Studio中的一个控件。使用 DataGr...
  • zhangspring1234
  • zhangspring1234
  • 2013-06-22 15:56
  • 3937

WPF - 使用XML作为datagrid数据源进行binding

WPF - 使用XML作为datagrid数据源进行binding
  • Danny_Yao
  • Danny_Yao
  • 2014-11-01 00:23
  • 1329

easyui datagrid如何加载通过ajax获得的json格式的数据

文章为转载,地址:http://www.xue163.com/588880/39097/390970679.html 为了帮助网友解决“easyui datagrid如何加载通”相关的问题,中国...
  • sam111_222
  • sam111_222
  • 2015-03-12 11:48
  • 4606

数据绑定——DataGrid

绑定数据
  • wgp15732622312
  • wgp15732622312
  • 2016-05-15 17:14
  • 515

jquery easyUI 中动态 改变 Datagrid中数据的方法

在jquery easyui中,一般在表格中显示数据的方法是在页面加载中指定数据URL,如下: table class="easyui-datagrid" style="width:400p...
  • Metal1
  • Metal1
  • 2013-07-16 21:48
  • 15867

(原创)Easyui中datagrid的Edit事件绑定失效的解决

上篇日志中给Edit绑定了一个事件后, 类型是combobox, 所以采用了如下的绑定方法: // 设置默认值 var editors = $('#staffLogDetailGrid')....
  • d7011800
  • d7011800
  • 2013-03-19 16:59
  • 9410
    个人资料
    • 访问:282374次
    • 积分:5599
    • 等级:
    • 排名:第5491名
    • 原创:65篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1677条
    文章分类
    最新评论