首页
所有分类
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 相关文章推荐
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
AngularJs 弹出模态框（model）
Apr 07 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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
SLi Minor 2020(63) 香港购物网站(84) 美国购物网站(1542) 纸巾盒(1) 天梯图(1) 爱尔兰购物网站(30) AE3805(1) CPU(2) 英国购物网站(954) 德生G88(1)
You might like
php实现的简易扫雷游戏实例
2015/07/09 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
2016/01/05 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
vue学习笔记五：在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python3.4爬虫demo
2019/01/22 Python
django云端留言板实例详解
2019/07/22 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
django实现日志按日期分割
2020/05/21 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python openssl模块安装及用法
2020/12/06 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
linux面试题参考答案（8）
2016/04/19 面试题
物流专员岗位职责
2014/02/17 职场文书
借款协议书范本
2014/04/22 职场文书
五四演讲稿范文
2014/09/03 职场文书
股东出资证明书范例
2014/10/04 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python