EasyUI的DataGrid绑定Json数据源的示例代码


Posted in Javascript onDecember 16, 2017

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函数中就可以了,函数执行时表格就可以绑定数据了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 #Javascript
微信小程序左右滑动的实现代码
Dec 15 #Javascript
浅析JavaScript中的特殊数据类型
Dec 15 #Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 #Javascript
微信小程序使用request网络请求操作实例
Dec 15 #Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
You might like
解析PHP可变函数的经典用法
2013/06/20 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
node.js中axios使用心得总结
2017/11/29 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
Python中 Lambda表达式全面解析
2016/11/28 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python的setattr函数实例用法
2020/12/16 Python
优秀毕业生自荐信范文
2014/01/01 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
小学英语复习计划
2015/01/19 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
redis 查看所有的key方式
2021/05/07 Redis
python中的plt.cm.Paired用法说明
2021/05/31 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技