首页
所有分类
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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
转义字符（\）对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
JavaScript初学者建议：不要去管浏览器兼容
Feb 04 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
Javascript模块化编程详解
Dec 01 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
node.js express框架简介与实现
Jul 23 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
queue(1) 云服务器(1) 外键约束(1) TaiShan(1) 内存池(1) 数据备份(2) expdp(1) Foreign Key(1) JDK(1) 腾讯云(1)
You might like
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
python更新列表的方法
2015/07/28 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python的re模块正则表达式操作
2016/05/25 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python初步实现word2vec操作
2020/06/09 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Groupon法国官方网站：特卖和网上购物高达-70%
2019/09/02 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
Prototype如何更新局部页面
2013/03/03 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
户外活动总结
2015/02/04 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
python中的3种定义类方法
2021/11/27 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技