详解EasyUi控件中的Datagrid


Posted in Javascript onAugust 23, 2017

     最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点,该项目中有个需求,需要在数据列表中直接编辑数据保存,行话叫做行内编辑。

   在讲行内编辑之前,我们需要先了解如何使用EasyUi创建一个DataGrid,当然方式有很多(1.easyui.js,或者直接html代码加easyui的Style),我采用的是JS的方式:

   一、使用Js创建DataGrid

详解EasyUi控件中的Datagrid

上面是效果图,

Html代码如下:在页面定义一个table

<!--数据展示 -->
 <div>
   <table id="DataGridInbound"></table>
 </div>

 Js代码如下:

 有几个我自己认为比较重要的属性在此标记下

url:这里是datagrid获取数据集的地址,就是你的Action,需要注意的是,你的Action需要返回Json格式的数据。

pagination:设置datagrid是否分页显示

queryParams:你的查询条件参数

formatter:格式化,在日期列用到了,EasyUi的datagrid显示日期如果不格式话,日期会乱显示

这些属性在EasyUi的官网都有详细介绍,我就不深入解释了。

$("#DataGridInbound").datagrid({
      title: '入库详情',
      idField: 'Id',
      rownumbers: 'true',
      url: '/Inbound/GetPageInboundGoodsDetail',
      pagination: true,//表示在datagrid设置分页       
      rownumbers: true,
      singleSelect: true,
      striped: true,
      nowrap: true,
      collapsible: true,
      fitColumns: true,
      remoteSort: false,
      loadMsg: "正在努力加载数据,请稍后...",
      queryParams: { ProductName: "", Status: "",SqNo:"" },
      onLoadSuccess: function (data) {
        if (data.total == 0) {
          var body = $(this).data().datagrid.dc.body2;
          body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
          $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
        }
          //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
        else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
      },
      columns: [[
        { field: 'ck', checkbox: true },
        { field: 'Id', hidden: 'true' },
        { field: 'InBoundId', hidden: 'true' },
        { field: 'ProductId', hidden: 'true' },
        { field: 'ProductTypeId', hidden: 'true' },
        { field: 'SqNo', title: '入库参考号', width: '100', align: 'left', sortable: true },
        {
          field: 'Status', title: '状态', width: '100', align: 'left', sortable: true,
          formatter: function (value, index, row) {
            if (value == "1") {
              return '<span style="color:green;">已入库</span>';
            }
            else if (value == "-1") {
              return '<span style="color:#FFA54F;">待入库</span>';
            }
          }
        },
        {
          field: 'InboundDate', title: '入库日期', width: '100', align: 'left', sortable: true,          
          formatter: function (date) {
            var pa = /.*\((.*)\)/;
            var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串
            return getTime(unixtime);
          }
        },
        { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
        { field: 'ProductType', title: '产品类型', width: '100', align: 'left', sortable: true },
        { field: 'Num', title: '数量', width: '100', align: 'left', sortable: true },
        { field: 'Storage', title: '所属仓库', width: '100', align: 'left', sortable: true },
        { field: 'CompanyCode', title: '所属公司', width: '100', align: 'left', sortable: true },
        { field: 'CreateBy', title: '操作人', width: '100', align: 'left', sortable: true },
      ]],
    });

二、今天的重点,DataGrid行内编辑

详解EasyUi控件中的Datagrid

如上效果图,我们在DataGrid行内直接变数据

Js代码如下:

如何实现行内编辑,需要在你所编辑的单元格中加入editor属性,editor属性有个type(他支持很多控件类型,可以到官网查看)就是编辑的控件类型。

比如说,上图中“入库状态”,首先我们定义数据源,json格式是重点。

var InboundStatus = [{ "value": "1", "text": "入库" }, { "value": "-1", "text": "待入库" }];

然后需要格式转换函数,不然你选择的时候只会显示value值,不是显示文本值。代码如下:

function unitformatter(value, rowData, rowIndex) {
    if (value == 0) {
      return;
    }
    for (var i = 0; i < InboundStatus.length; i++) {
      if (InboundStatus[i].value == value) {
        return InboundStatus[i].text;
      }
    }
  }

如何把数据源绑定到DataGrid列中,代码如下:

formatter:使用我们前面定义的转换格式函数。

options:中的data就是我们定义的数据源。

valueField:选中后的value值,不用详细解释了吧

textField:选中后显示的值,文本值。

type:combobox,就是下拉选项的样式。

{
        field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
          type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
//这部分代码请结合下面的创建Grid的Js代码查看。
$("#dataGrid").datagrid({
    title: "产品列表",
    idField: 'ProductID',
    treeField: 'ProductName',
    onClickCell: onClickCell,
    striped: true,
    nowrap: true,
    collapsible: true,
    fitColumns: true,
    remoteSort: false,
    sortOrder: "desc",
    pagination: true,//表示在datagrid设置分页       
    rownumbers: true,
    singleSelect: false,
    loadMsg: "正在努力加载数据,请稍后...",
    url: "/Inbound/GetProductPage",
    onLoadSuccess: function (data) {
      if (data.total == 0) {
        var body = $(this).data().datagrid.dc.body2;
        body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
        $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
      }
        //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
      else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
    },
    columns: [[
      { field: 'ck', checkbox: true },
      { field: 'ProductID', title: '产品ID', hidden: true },
      { field: 'CategoryID', title: '分类ID', hidden: true },
      { field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },
      { field: 'CompanyCode', title: '所属公司', width: '100', align: 'center', sortable: true },
      { field: 'CategoryName', title: '所属分类', width: '100', align: 'center', sortable: true },
      { field: 'Num', title: '数量', editor: 'numberbox' },
      {
        field: 'Status', title: '入库状态', formatter: unitformatter, editor: {
          type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
        }
      },
      {
        field: 'InDate', title: '入库日期', width: '100', editor: {
          type: 'datebox'
        }
      },
      {
        field: 'Storage', width: '100', title: '所入仓库',
        formatter: function (value, row) {
          return row.Storage || value;
        },
        editor: {
          type: 'combogrid', options: {
            //url: '/Storage/GetAllStorage',
            //url:'/Product/GetAllCustomerAddress',
            rownumbers: true,
            data: $.extend(true, [], sdata),
            idField: 'AddressID',
            textField: 'Name',
            columns: [[
              { field: 'AddressID', hidden: true },
              { field: 'Name', title: '库名' },
              { field: 'Country', title: '国家' },
              { field: 'Province', title: '省份' },
              { field: 'City', title: '市' },
              { field: 'Area', title: '区' },
              { field: 'Address', title: '详细地址' },
            ]],
            loadFilter: function (sdata) {
              if ($.isArray(sdata)) {
                sdata = {
                  total: sdata.length,
                  rows: sdata
                }
              }
              return sdata;
            },
          }
        }
      }
    ]],
    onBeginEdit: function (index, row) {
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      $(ed.target).combogrid('setValue', { AddressID: row.AddressID, Name: row.Name });
    },
    onEndEdit: function (index, row) {
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      row.Storage = $(ed.target).combogrid('getText');
    },
    onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid('setValue', sdata[i].AddressID);
          }
        }
      }
    }
  });

三、重头戏,也是我遇到的问题。

描述:我在datagrid中添加了下拉datagrid控件,当我第一次选中后,如果在去点击datagrid行,选中的下拉datagrid控件的值会被刷掉,这个问题确实困扰我很久,不过后来处理了,那种感觉也是无比的爽啊!

详解EasyUi控件中的Datagrid

如上效果图,“所入仓库”一列,下拉是个datagrid,他的专业词汇叫“Combogird”。就是这个玩意第一次选中没问题,第二次点击会把第一次选中的值刷掉。这也是一开始我对EasyUi的一个OnClickRow事件不了解。

先来上我之前的错误代码:

onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
            $(ed.target).combogrid('setValue', row.Name);
        }
      }
    }

大家伙一定很苦恼这个row.Name是个什么玩意?what?其实我一开始也不知道,因为这个是错误代码,我是病急乱投医,胡乱写的,哈哈,也不是胡乱写啦,因为我的下拉grid中有个字段是Name,然而我把他混淆了,此row是指你点击的datagrid的row,而不是你数据源的row。我也是不断调试Js看出来的端倪。我点击datagrid的时候,代码跳入OnClickRow事件中,有句代码:“var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });”,然后发现ed为null, Js抛异常,但是界面看不出来,只是把选中的数据刷掉了。找到问题后,还是不确定,代码修改完,再运行,正常显示,也不刷掉我选中的值。

正确代码如下:

onClickRow: function (index, row) {//getEditor
      var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
      if (ed != undefined) {
        var s = row.Storage;
        for (var i = 0; i < sdata.length; i++) {
          if (s == sdata[i].Name) {
            $(ed.target).combogrid('setValue', sdata[i].AddressID);
          }
        }
      }
    }

 一下是下拉Grid的数据源

function synchroAjaxByUrl(url) {
    var temp;
    $.ajax({
      url: url,
      async: false,
      type: 'get',
      dataType: "json",
      success: function (data) {
        temp = data;
      }
    });
    return temp;
  }
  var sdata = synchroAjaxByUrl('/Product/GetAllCustomerAddress');

总结

以上所述是小编给大家介绍的EasyUi控件中的Datagrid,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js中replace的用法总结
Dec 27 Javascript
AngularJS手动表单验证
Feb 01 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue 解决循环引用组件报错的问题
Sep 06 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 #Javascript
Bootstrap table使用方法记录
Aug 23 #Javascript
JS实现浏览上传文件的代码
Aug 23 #Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
JS轮播图实现简单代码
Feb 19 #Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 #Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php标签云的实现代码
2012/10/10 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
婚礼主持词
2014/03/13 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
幼儿园老师寄语
2014/04/03 职场文书
大学活动总结范文
2014/04/29 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书