详解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 相关文章推荐
jquery清空表单数据示例分享
Feb 13 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
采用call方式实现js继承
2014/05/20 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
Javascript writable特性介绍
2015/02/27 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
外贸员简历中的自我评价
2014/03/04 职场文书
房屋买卖协议书
2014/04/10 职场文书
园艺师求职信
2014/04/27 职场文书
希特勒的演讲稿
2014/05/23 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
创业计划书之花店
2019/09/20 职场文书