首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

easyui-datagrid开发实践(总结)

Posted in Javascript onAugust 02, 2017

一，引言

工作的需要，做了3年的wpf(mvvm)……，又因为项目的需求，回归到web的开发。

  • 3 years ago，vue是我三年前没用过的玩意儿。
  • 3 years ago，bootstrap组件没现在成熟。
  • 3 years ago，font awesome的普及度没有现在高。
  • 3 years ago，ui组件的选择也没有现在多。

easyui-datagrid开发实践(总结)

二，项目的前端（easyui模板订制）

整个项目采用了oracle  + dapper  + castle + mvc + easyui的技术结合，本篇博客重点介绍easyui。

easyui的默认风格看久了很容易产生视觉疲劳，在这个项目中，我个性化订制风格。

订制easyui模板的工作量是挺大的，我用了一个偷懒的方法，花了几百块钱在网上买了几个easyui的皮肤，然后对这些皮肤，进行优化和重构。

money比较紧的同学，可以去下载easyui的免费皮肤。

easyui-datagrid开发实践(总结)

三，easyui-datagrid的基本使用：

1，加载数据

a，通过post，url的方法向后端请求数据，如图所示：

easyui-datagrid开发实践(总结)

$('#List').datagrid({
        title: "交易公司",
        loadMsg: '@CommonResource.Processing',
        toolbar: '#tb',
        width: "100%",
        height: "100%",
        //idField:"ID",
        //data: getData(),
        url: "@Url.Action("GetList")",
        methord: 'post',
        rownumbers: true,
        autoRowHeight: false,
        fit: true,
        //fitColumns: true,
        striped: true,   //奇偶行
        singleSelect: true,//单选模式
        checkOnSelect: false,
        selectOnCheck: false,
        collapsible: true,
        pagination: true,
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 20],
        queryParams: { },
        columns: [[
          { field: 'Company_Name', title: '公司名称', width: 100, sortable: false },
          { field: 'Abbreviation', title: '简称', width: 100, sortable: false },
          { field: 'Business_Address', title: '经营地址', width: 100, sortable: false },
          { field: 'Registered_Address', title: '注册地址', width: 100, sortable: false },
          { field: 'Tel', title: '电话', width: 100, sortable: false },
          { field: 'Fax', title: '传真', width: 100, sortable: false },
          { field: 'Contactor', title: '联系人', width: 100, sortable: false },
          { field: 'Payment', title: '结算方式', width: 100, sortable: false },
          { field: 'Beneficiary_Name', title: '开户名称', width: 100, sortable: false },
          { field: 'Beneficiary_Address', title: '开户地址', width: 100, sortable: false },
          { field: 'Advising_Bank', title: '通知行', width: 100, sortable: false },
          { field: 'Bank_Address', title: '银行地址', width: 100, sortable: false },
          { field: 'Swift_Code', title: '银行代码', width: 100, sortable: false },
          { field: 'Beneficiary_Account', title: '银行账户', width: 100, sortable: false },
          { field: 'Company_Chop', title: '电子章', width: 100, sortable: false },
          { field: 'Send_Url', title: '发件邮箱链接', width: 100, sortable: false },
          { field: 'Send_Email', title: '发件人邮箱', width: 100, sortable: false },
          { field: 'Remark', title: '备注', width: 100, sortable: false },
          { field: 'Created_By', title: '创建人', width: 100, sortable: false },
          { field: 'Creation_Date', title: '创建日期', width: 100, sortable: false },
          { field: 'Modify_By', title: '修改人', width: 100, sortable: false },
          { field: 'Modify_Date', title: '修改日期', width: 100, sortable: false },
        ]],

      });
    });

b，先定义好了datagrid的属性以及列，再通过loadData的方法设置datagrid的数据

$('#Detail').datagrid({
  loadMsg: '@CommonResource.Processing',
  toolbar: '#tb',
  width: "100%",
  height: "100%",
  //data: [],
  rownumbers: true,
  autoRowHeight: false,
  fit: true,
  fitColumns: true,
  striped: true,
  singleSelect: true,
  collapsible: false,
  pagination: false,
  queryParams: { },
  columns: [[
    { field: 'Country_Name', title: '国家名称', width: 100, sortable: false },
    { field: 'Item_Number', title: '物料编码', width: 100, sortable: false },
  ]],
});
var returnData = JSON.parse(response.data);
$('#Detail').datagrid("loadData", returnData);

2，合并单元格

有时候用户需要如下图的效果

easyui-datagrid开发实践(总结)

可以在datagrid的onLoadSuccess事件里增加如下代码：

onLoadSuccess: function (data) {
  //var opts = $('#List').datagrid('getColumnFields');
  var opts = new Array("Item_Number", "Country_Name", "Item_Desc", "Item_Desc_En", "Item_Type", "Unit", "Hs_Code", "Destination_Code", "Status", "Remark", "Create_User", "Create_Date");
  var rowsCount = data.rows.length;
  var mark = 1;
  for (var j = 1; j < rowsCount; j++)
  {
    var preCellVal = data.rows[j - 1]["Material_Id"];
    var currentCellVal = data.rows[j]["Material_Id"];
    if (preCellVal == currentCellVal) {
      mark += 1;
      for (var c = 0; c < opts.length; c++) {
        var columnName = opts[c];
        $(this).datagrid('mergeCells', {
          field: columnName,
          index: j + 1 - mark,
          rowspan: mark
        });
      }
    }
    else {
      mark = 1;
    }
  }
},

3，行，列变色

easyui-datagrid开发实践(总结)

针对这样的行，列变色效果：

a，行变色

easyui-datagrid开发实践(总结)

$('#Detail').datagrid({
  loadMsg: '@CommonResource.Processing',
  toolbar: '#tb',
  width: "100%",
  height: "100%",
  url: "@Url.Action("GetLines")",
  methord: 'post',
  rownumbers: true,
  autoRowHeight: false,
  fit: true,
  fitColumns: true,
  striped: true,
  singleSelect: true,
  collapsible: false,
  pagination: false,
  queryParams: { hid: $("#Hid").val() },
  columns: [[
    { field: 'Material_No', title: '物料号', width: 100, sortable: false },
    { field: 'Description', title: '中文描述', width: 100, sortable: false },
    { field: 'En_Description', title: '英文描述', width: 100, sortable: false },
    { field: 'Unit', title: '单位', width: 100, sortable: false },
    { field: 'Quantity', title: '工单数量', width: 100, sortable: false },
    { field: 'Total_Actual_Send_Quantity', title: '已出货数量', width: 100, sortable: false },
    { field: 'Remark', title: '备注', width: 100, sortable: false },
  ]],
  rowStyler: function (index, row) {
    if (row.Quantity == 0) {
      return 'background-color:pink;color:blue;font-weight:bold;';
    }
  },
});

b，列变色

easyui-datagrid开发实践(总结)

$('#Detail').datagrid({
  loadMsg: '@CommonResource.Processing',
  width: "100%",
  height: "100%",
  data: [],
  rownumbers: true,
  autoRowHeight: false,
  fit: true,
  fitColumns: true,
  striped: true,
  singleSelect: true,
  checkOnSelect: false,
  selectOnCheck: false,
  collapsible: false,
  pagination: false,
  queryParams: {},
  columns: [[
    { field: 'sel', checkbox: true },
    { field: 'Material_No', title: '物料号', width: 80, sortable: false },
    { field: 'Description', title: '中文描述', width: 80, sortable: false },
    { field: 'Unit', title: '单位', width: 80, sortable: false },
    { field: 'Quantity', title: '工单数量', width: 80, sortable: false },
    { field: 'Total_Actual_Send_Quantity', title: '已出货数量', width: 80, sortable: false },
    { field: 'Remain_Quantity', title: '剩余数量', width: 80, sortable: false },
    {
      field: 'Actual_Send_Quantity', title: '本次出货', width: 80, sortable: false,
      editor: { type: 'numberbox', options: { required: true, min: 0 }, },
      styler: function (value, row, index) {
        return 'background-color:#ecffff;';
      },
    },
    {
      field: 'Remark', title: '备注', width: 80, sortable: false,
      editor: { type: 'textbox', options: { validType: 'length[1,20]' }, },
      styler: function (value, row, index) {
        return 'background-color:#ecffff;';
      },
    },
  ]],

4，为datagrid添加工具条

如下效果的工具条，是通过datagrid的 toolbar 属性来指定，要留意的是toolbar的控件名称需要加上#符号。

easyui-datagrid开发实践(总结)

html代码：

<div id="tb">
  <a id='condition' href='#' class='btn btn-default more'><i class='fa fa-ellipsis-v'></i>  查询条件</a>
  @Html.ToolButton(string.Format(@"<a id='btnCreate' href='#' class='btn btn-default'><i class='fa fa-plus'></i>  {0}</a>", @CommonResource.Add), ActionCode.Create)
  @Html.ToolButton(string.Format(@"<a id='btnEdit' href='#' class='btn btn-default'><i class='fa fa-pencil'></i>  {0}</a>", @CommonResource.Edit), ActionCode.Edit)
  @Html.ToolButton(string.Format(@"<a id='btnDelete' data-content='Delete 1' href='#' class='btn btn-primary'><i class='fa fa-trash'></i>  {0}</a>", @CommonResource.Delete), ActionCode.Delete)
</div>

js代码：

easyui-datagrid开发实践(总结) 

5，做增，删，改操作

a,为datagrid增加一行

function addCallBack(data) {
  $('#List').datagrid('insertRow', {
    index: 0,
    row: data,
  });
  layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
}

b,为datagrid编辑一行

function editCallBack(data) {
  var selectData = $('#List').datagrid('getSelected');
  var selectIndex = $('#List').datagrid('getRowIndex', selectData);
  $('#List').datagrid('updateRow', {
    index: selectIndex,
    row: data,
  });
  layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 });
}

c,为datagrid删除一行

$("#btnLineDelete").click(function () {
  var row = $('#Detail').treegrid('getSelected');
  if (row != null) {
    var rowIndex = $('#Detail').datagrid('getRowIndex', row);
    $('#Detail').datagrid('deleteRow', rowIndex);
    layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
  }
  else {
    layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
  }
});

d,treegrid的操作方法略有区别，附上源码：

function addCallBack(data) {
    var row = $('#List').treegrid('getSelected');
    $('#List').treegrid('append', {
      parent: data.Parent_Id,
      data: [{
        Id: data.Id,
        Name: data.Name,
        En_Name:data.En_Name,
        Code: data.Code,
        Enable: data.Enable,
        Sort: data.Sort,
      }]
    });
    layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
  }

  function editCallBack(data) {
    var row = $('#List').treegrid('getSelected');
    $('#List').treegrid('update', {
      id: row.Id,
      row: {
        Name: data.Name,
        En_Name: data.En_Name,
        Code: data.Code,
        Enable: data.Enable,
        Sort: data.Sort,
      }
    });
    layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 });
  }

  $("#btnDelete").click(function () {
    var row = $('#List').treegrid('getSelected');
    if (row != null) {
      layer.confirm('@CommonResource.ConfirmDelete', {
        btn: ['@CommonResource.Sure', '@CommonResource.Cancel'],
        shadeClose: true,
      }, function () {
        if (row.ChildCount == 0 || typeof (row.ChildCount) == 'undefined') {
          $.post("@Url.Action("Delete")/" + row.Id, function (data) {
            if (data == "1") {

              $("#List").treegrid('remove', row.Id);
              layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
            }
            else {
              layer.msg('@CommonResource.DeleteFailed', { icon: 2, time: 1000 });
            }

          }, "json");
        }
        else {
          layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
        }

      }, function () {
      });
    }
    else {
      layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
    }
  });

6，编辑单元格

easyui-datagrid开发实践(总结) 

具体代码实现

var taxTypeList = JSON.parse($("#taxTypeList").val());
    var manufactureList = JSON.parse($("#manufactureList").val());

    $.extend($.fn.datagrid.methods, {
      editCell: function (jq, param) {
        return jq.each(function () {
          var opts = $(this).datagrid('options');
          var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
          for (var i = 0; i < fields.length; i++) {
            var col = $(this).datagrid('getColumnOption', fields[i]);
            col.editor1 = col.editor;
            if (fields[i] != param.field) {
              col.editor = null;
            }
          }
          $(this).datagrid('beginEdit', param.index);
          for (var i = 0; i < fields.length; i++) {
            var col = $(this).datagrid('getColumnOption', fields[i]);
            col.editor = col.editor1;
          }
        });
      }
    });

    var editIndex = -1;
    function endEditCal() {
      if (editIndex == -1) {
        return true;
      }
      if ($('#Detail').datagrid('validateRow', editIndex)) {
        $('#Detail').datagrid('endEdit', editIndex);
        editIndex = -1;
        return true;
      }
      else {
        return false;
      }
    }

    $('#Detail').datagrid({
      loadMsg: '@CommonResource.Processing',
      toolbar: '#tb',
      width: "100%",
      height: "100%",
      data: JSON.parse($("#MaterialDetailListStr").val()),
      rownumbers: true,
      autoRowHeight: false,
      fit: true,
      fitColumns: true,
      striped: true,
      singleSelect: true,
      collapsible: false,
      pagination: false,
      queryParams: { },
      columns: [[
        {
          field: 'Material_Use', title: '用途', width: 100, sortable: false,
          formatter: function (value) {
            for (var i = 0; i < manufactureList.length; i++) {
              if (manufactureList[i].Key == value) return manufactureList[i].Value;
            }
            return value;
          },
          editor: {
            type: 'combobox',
            options: {
              valueField: 'Key',
              textField: 'Value',
              data: manufactureList,
              required: true,
              panelHeight: "auto",
              editable:false,
            }
          },
        },

        {
          field: 'Tax_Type', title: '税别', width: 100, sortable: false,
          formatter: function (value) {
            for (var i = 0; i < taxTypeList.length; i++) {
              if (taxTypeList[i].Key == value) return taxTypeList[i].Value;
            }
            return value;
          },
          editor: {
            type: 'combobox',
            options: {
              valueField: 'Key',
              textField: 'Value',
              data: taxTypeList,
              required: true,
              panelHeight: "auto",
              editable: false,
            }
          },
        },
        { field: 'Tax_Bcd', title: 'BCD', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
        { field: 'Tax_Cess', title: 'CESS', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
        { field: 'Tax_Igst', title: 'IGST', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
      ]],
      @if (Request.Params["Operate"] != "View")
        {
          <text>
          onClickCell: function (index, field, value) {
            if (endEditCal()) {
              $(this).datagrid('selectRow', index).datagrid('editCell', { index: index, field: field }); //编辑一个单元格
              //$(this).datagrid('beginEdit', index); //编辑一行
              editIndex = index;
            }
            else {
              layer.msg('当前行的数据编辑有误', { icon: 2, time: 1000 });
            }
          },
          onAfterEdit: function (index, row, changes) {
            var rowData = $(this).datagrid('getData').rows[index];
            $('#Detail').datagrid('updateRow', {
              index: index,
              row: {},
            });
          },
          onLoadSuccess: function (data) {
            for (var index = 0; index < data.rows.length; index++) {
              $(this).datagrid('beginEdit', index);
            }
          },
          </text>
        }
    });

    $("#btnLineCreate").click(function () {

      if (endEditCal()) {
        editIndex = 0;
        $('#Detail').datagrid('insertRow', {
          index: editIndex,
          row: {},
        });
        $('#Detail').datagrid('selectRow', editIndex);
        $('#Detail').datagrid('beginEdit', editIndex);
      }
      else {
        layer.msg('当前行的数据编辑有误', { icon: 2, time: 1000 });
      }
    });

    $("#btnLineDelete").click(function () {
      var row = $('#Detail').treegrid('getSelected');
      if (row != null) {
        var rowIndex = $('#Detail').datagrid('getRowIndex', row);
        $('#Detail').datagrid('deleteRow', rowIndex);
        layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
      }
      else {
        layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
      }
    });

    $("#btnSave").click(function () {
      var summaryValidate = true;
      var rows = $("#Detail").datagrid("getRows");
      $(rows).each(function (index, itemData) {
        if ($('#Detail').datagrid('validateRow', index)) {
          $('#Detail').datagrid('endEdit', index);
        }
        else {
          summaryValidate = false;
          return false;
        }
      });
      if (summaryValidate) {
        if (rows.length == 2) {
          $("#MaterialDetailListStr").val(JSON.stringify(rows));
        }
        else {
          layer.msg('税别,用途应该设置为2行数据', { icon: 2, time: 1000 });
          return false;
        }
      }
      else {
        layer.msg('当前表单数据编辑有误', { icon: 2, time: 1000 });
        return false;
      }

      var check = $('form').form('validate');
      if (check) {
        $.ajax({
          url: "@Url.Action("CreateMaterial")",
          type: "Post",
          data: $("form").serialize(),
          dataType: "json",
          success: function (data) {
            if (data.Key == "1") {
              parent.$("#List").datagrid('reload');
              var index = parent.layer.getFrameIndex(window.name);
              parent.layer.close(index);
              parent.layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
            }
            else {
              layer.msg("物料编号'" + data.Value.Item_Number + "'在数据库中已添加", { icon: 2, time: 1000 });
            }
          },
          error: function (jqXHR, textStatus, errorThrown) {
            layer.msg('@CommonResource.AddFailed', { icon: 2, time: 1000 });
          }
        });
      }
    });

7，重置datagrid布局  $('#List').datagrid("resize");

$(function () {
  $(".more").click(function () {
    $(this).closest(".conditions").siblings().toggleClass("hide");
    $('#List').datagrid("resize");
  });
})

四，总结

这些技巧，在帮助文档里也说的很详细，我只是把这些技术用于实践。希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

easyui-datagrid开发实践(总结)

- Author -

Sam Xiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
Apr 03 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）
Aug 18 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
js如何编写简单的ajax方法库
Aug 02 #Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 #Javascript
基于jquery实现多选下拉列表
Aug 02 #jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 #Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 #Javascript
javascript 取小数点后几位几种方法总结
Aug 02 #Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 #Javascript
B+树(2) pt-archiver(1) 忘记密码(1) EventBus(1) muduo(1) Fragment(1) instantclient(1) 存储过程(3) ICF-5900W(2) TcpServer(1)
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php中explode函数用法分析
2014/11/15 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Smarty模板语法详解
2019/07/20 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
JS中Map和ForEach的区别
2018/02/05 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
土木工程实习生自我鉴定
2013/09/19 职场文书
毕业生物理教师求职信
2013/10/17 职场文书
银行实习生的自我评价
2014/01/13 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
农村葬礼主持词
2014/03/31 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
会计出纳岗位职责
2015/03/31 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技