首页
所有分类
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 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
JS 创建对象的模式实例小结
Apr 28 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
游标(1) 表变量(1) ref(1) ip连接(1) postcss-px2rem(1) props(1) GTID(1) ECharts(3) mixin(1) 临时表(1)
You might like
超级简单的发送邮件程序
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php数组键名技巧小结
2015/02/17 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php二维码生成以及下载实现
2017/09/28 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python高阶爬虫实战分析
2018/07/29 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python将图片转base64,实现前端显示
2020/01/09 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
PHP如何自定义函数
2016/09/16 面试题
铭万公司.net面试题笔试题
2014/07/20 面试题
局域网定义和特性
2016/01/23 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
销售主管竞聘书
2014/03/31 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
法制教育主题班会
2015/08/13 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电