详解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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JavaScript中Function详解
Feb 27 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
JavaScript实现滚动加载更多
Dec 27 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入门学习知识点三 PHP上传
2011/07/14 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
js数组去重的hash方法
2016/12/22 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python如何实现文本转语音
2016/08/08 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
详解python中的模块及包导入
2019/08/30 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
英文自我鉴定
2013/12/10 职场文书
临床护士自荐信
2014/01/31 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
地方白酒代理协议书
2014/10/25 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书