easyui-datagrid開發實踐(總結)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> easyui-datagrid開發實踐(總結)

編輯：JQuery入門技巧

一，引言

工作的需要，做了3年的wpf(mvvm)……，又因為項目的需求，回歸到web的開發。

3 years ago，vue是我三年前沒用過的玩意兒。
3 years ago，bootstrap組件沒現在成熟。
3 years ago，font awesome的普及度沒有現在高。
3 years ago，ui組件的選擇也沒有現在多。

二，項目的前端（easyui模板訂制）

整個項目采用了oracle + dapper + castle + mvc + easyui的技術結合，本篇博客重點介紹easyui。

easyui的默認風格看久了很容易產生視覺疲勞，在這個項目中，我個性化訂制風格。

訂制easyui模板的工作量是挺大的，我用了一個偷懶的方法，花了幾百塊錢在網上買了幾個easyui的皮膚，然後對這些皮膚，進行優化和重構。

money比較緊的同學，可以去下載easyui的免費皮膚。

三，easyui-datagrid的基本使用：

1，加載數據

a，通過post，url的方法向後端請求數據，如圖所示：

      $('#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，合並單元格

有時候用戶需要如下圖的效果

可以在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，行，列變色

針對這樣的行，列變色效果：

a，行變色

$('#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，列變色

$('#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的控件名稱需要加上#符號。

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代碼：

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，編輯單元格

具體代碼實現

    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");
  });
})

四，總結

這些技巧，在幫助文檔裡也說的很詳細，我只是把這些技術用於實踐。希望對大家的學習有所幫助，也希望大家多多支持。

上一頁:jQuery初級教程之網站品牌列表效果
下一頁:基於jquery實現多選下拉列表

JQuery入門技巧

jQuery實現點擊任意位置彈出層外關閉彈出層效果: 在之前做項目的時候經常會在主頁面上點擊某個按鈕，右側彈出一個div輸出對應內容的詳細信息。此時，我是
基於jQuery和Bootstrap框架實現仿知乎前端動態列表效果: 最近基於jQuery和Bootstrap框架實現了一個仿知乎動態列表的前端效果，基本實現了和知乎動態
BootStrap網頁中代碼顯示<code><pre>用法詳解: 網頁中代碼的顯示，包括行中代碼顯示；成段的代碼顯示，效果圖如下<!DOCTYPE html P

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章