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 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jquery实现全屏滚动
Dec 28 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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 冒泡排序 交换排序法
2011/05/10 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP实现的日历功能示例
2018/09/01 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
JavaScript如何操作css
2020/10/24 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
医生自荐信
2013/10/11 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
计划生育诚信协议书
2014/11/02 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年接待工作总结
2014/11/26 职场文书
幼儿学前班评语
2014/12/29 职场文书
公司感谢信范文
2015/01/22 职场文书
挂职个人工作总结
2015/03/05 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
python字符串的一些常见实用操作
2022/04/06 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android