小編給大家分享一下jquery+easyui+DataGrid的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

十余年的梅列網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整梅列建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“梅列網(wǎng)站設(shè)計”,“梅列網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

一、簡單示例

HTML

  
    
      
      
      
        名稱
       
    
  

JS

$('#tbList').datagrid({ pagination: true });
$("#btnSearch").click(function () {//查詢方法
  $('#tbList').datagrid("unselectAll");
  $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val()} });
});

二、基本用法

凍結(jié)列

$('#tbList').datagrid({ pagination: true,
      frozenColumns: [[
      { field: 'BId',checkbox:'true',width:30},
      { field: 'BNo', title: '牌號', width: 100 },
      { field: 'FNo', title: '班號', width: 100 }
    　　]], 
　　　　　　　fitColumns:false　//禁止自適應(yīng)寬度、可以水平滾動
    });

去掉分頁

$('#tbList').datagrid({pagination: true});

更改為

$('#tbList').datagrid();

或

$('#tbList').datagrid({pagination: false});

注意：同時需要設(shè)置table的高度，而且不能為auto

復選框以及單選

變?yōu)閱芜x（添加singleSelect="true"  ）

復制代碼 代碼如下:

加載數(shù)據(jù)后默認全選：

 $(document).ready(function () {
    $('#tbList').datagrid({ 
      onLoadSuccess: function (data) {
        $('#tbList').datagrid('selectAll');
      } 
    });

獲取行數(shù)

$('#tbList').datagrid("getRows").length;

隱藏列

名稱

清空原有數(shù)據(jù)

方法1：

 var item = $('#filegrid').datagrid('getRows');
      if (item) {
        for (var i = item.length - 1; i >= 0; i--) {
          var index = $('#filegrid').datagrid('getRowIndex', item[i]);
          $('#filegrid').datagrid('deleteRow', index);
        }
      }

方法2：(測試過)

$('#filegrid').datagrid('loadData', { total: 0, rows: [] });

解析：loadData：載入本地數(shù)據(jù)，舊記錄將被移除。

行點擊事件

 $('#tbList').datagrid({ onClickRow: function () {//代碼 } });

datagrip單擊行的時候，將單選按鈕設(shè)置為選中

  var List = {};
  List.RadioFormatter = function (value, rec, index) {
    return "";
  };

　$(document).ready(　function(){ //呈現(xiàn)列表數(shù)據(jù)
　　$('#tbList').datagrid({ onClickRow:
      function () {
        //單擊行的時候，將單選按鈕設(shè)置為選中
        var id = $('#tbList').datagrid("getSelected");
        $("input[name='name']").each(function () {
          if ($(this).val() == id.Id) {
            $(this).attr("checked", true);
          }
        });
      }
    });
});


      

 table中td的時間格式問題

1.頁面

2.js 

var Common = {
  //EasyUI用DataGrid用日期格式化
  TimeFormatter: function (value, rec, index) {
    if (value == undefined) {
      return "";
    }
    /*json格式時間轉(zhuǎn)js時間格式*/
    value = value.substr(1, value.length - 2);
    var obj = eval('(' + "{Date: new " + value + "}" + ')');
    var dateValue = obj["Date"];
    if (dateValue.getFullYear() < 1900) {
      return "";
    }
    var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
    return val.substr(11, 5);
  }

};

table中td內(nèi)容太長自動換行

添加屬性　nowrap="false"

將nowrap: false這個屬性設(shè)置在table的屬性中，不要設(shè)置在字段的屬性中，字段可以設(shè)置寬度，這樣就可以做到當文字長度超過規(guī)定的寬度后自動換行了

行和復選框的分離

方法一：（1.3版本才能用）

checkOnSelect="false" selectOnCheck="false"

注意：當使用$("#tbList").datagrid("getSelections");時候，只有行被選中，才能取到該行。一般情況，選中行時候，行為黃色背景。

eg.

var selected = $("#tbList").datagrid("getSelections");
    if (selected.length == 0) {
      alert("請選擇！");
      return;
    }

    var idString = "";
    $.each(selected, function (index, item) {
      idString += item.Id + ",";
    });

方法二（1.3版本之前的解決方法） 

var IsCheckFlag = true;
    $('#tbList').datagrid({
      pagination: true,
      onClickCell: function (rowIndex, field, value) {
        IsCheckFlag = false;
      },
      onSelect: function (rowIndex, rowData) {
        if (!IsCheckFlag) {
          IsCheckFlag = true;
          $("#tbList").datagrid("unselectRow", rowIndex);
        }
      },
      onUnselect: function (rowIndex, rowData) {
        if (!IsCheckFlag) {
          IsCheckFlag = true;
          $("#tbList").datagrid("selectRow", rowIndex);
        }
      }
    });

設(shè)置數(shù)據(jù)列表的樣式

 $(document).ready(function () {
    //呈現(xiàn)列表數(shù)據(jù)
    $('#tbList').datagrid({ pagination: true,
      rowStyler: function(index,row){
          if (row.ID< 10) {//那么數(shù)據(jù)的id字段小于10的，將顯示為灰色字體
            return 'color:#999;';//和一般的樣式寫法一樣
          }
        }
      });
  });

條件查詢

復選框的bug:使用參數(shù)查詢時候，在查詢之前選中的選項 ，在查詢之后，使用getSelections方法去獲取，依舊存在該選項

解決方案：通過unselectAll在查詢之前清空復選框即可

$("#btnSearch").click(function () {
      $('#tbList').datagrid("unselectAll");
      $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } });
    });

查詢bug:使用參數(shù)查詢時候，在查詢之后，顯示的當前頁碼還是之前的 ，不會重置為1，還是之前頁碼；如果當前總頁數(shù)為比當前小，導致頁面顯示為空。比如，當前第三頁，加入時間查詢后，只有1頁數(shù)據(jù)，那么當前頁碼還是3，導致頁面顯示空白。

解決方案：設(shè)置pageNumber為 1

$("#btnSearch").click(function () {
      $('#tbList').datagrid("unselectAll");
      $('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } });
    });

 三、行數(shù)據(jù)的增刪改

HTML（不分頁列表）

復制代碼 代碼如下:

JS

$(document).ready(function () { 
    var datagrid;
    var editRow = undefined;
    datagrid = $("#tbList").datagrid({
      border: true,
      checkbox: true,
      iconCls: 'icon-save', //圖標
      nowap: true, //列內(nèi)容多時自動折至第二行
      pagination: false,
      rownumbers: true,
      striped: true, //行背景交換
      columns: [[//顯示的列
       { field: 'ID', title: '編號', width: 100, align: 'center', sortable: true, checkbox: true },
       { field: 'Name', title: '名稱', width: 100, sortable: true },
       {
         field: 'PriceType', title: '類型', width: 100, align: 'center',
         formatter: function (value, row) { return row.TypeName; },
         editor: {
           type: 'combobox', options: {
             valueField: 'Value',
             textField: 'Text',
             method: 'get',
             url: $("#TypeUrl").val(),
             required: true
           }
         }
       },
        {
          field: 'Price', title: '價格', width: 100, align: 'center',
          editor: {
            type: 'numberbox', options: {
              required: true,
              min: 0,
              precision: 2
            }
          }
        },
        {
          field: 'Count', title: '數(shù)量', width: 100, align: 'center',
          editor: {
            type: 'numberbox', options: {
              required: true,
              min: 0,
              precision: 0
            }
          }
        }
      ]],
      queryParams: { action: 'query' }, //查詢參數(shù)
      toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
          //添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結(jié)束編輯
          if (editRow != undefined) {
            datagrid.datagrid("endEdit", editRow);
          }
          //添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
          if (editRow == undefined) {
            datagrid.datagrid("insertRow", {
              index: 0, // index start with 0
              row: {

              }
            });
            //將新插入的那一行開戶編輯狀態(tài)
            datagrid.datagrid("beginEdit", 0);
            //給當前編輯的行賦值
            editRow = 0;
          }

        }
        }, '-',
       {
         text: '刪除', iconCls: 'icon-remove', handler: function () {
           //刪除時先獲取選擇行
           var rows = datagrid.datagrid("getSelections");
           //選擇要刪除的行
           if (rows.length > 0) {
             $.messager.confirm("提示", "你確定要刪除嗎?", function (r) {
               if (r) {
                 var ids = [];
                 for (var i = 0; i < rows.length; i++) {
                   ids.push(rows[i].ID);
                 } 
                 //將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串
                 if ($.trim(ids) != "") {
                  //---- Delete(ids.join(','));//這是post
                 } else {
                   alert("請選擇要刪除的信息！");
                 }
               }
             });
           }
           else {
             $.messager.alert("提示", "請選擇要刪除的行", "error");
           }
         }
       }, '-',
       {
         text: '修改', iconCls: 'icon-edit', handler: function () {
           //修改時要獲取選擇到的行
           var rows = datagrid.datagrid("getSelections");
           //如果只選擇了一行則可以進行修改，否則不操作
           if (rows.length == 1) {
             //修改之前先關(guān)閉已經(jīng)開啟的編輯行，當調(diào)用endEdit該方法時會觸發(fā)onAfterEdit事件
             if (editRow != undefined) {
               datagrid.datagrid("endEdit", editRow);
             }
             //當無編輯行時
             if (editRow == undefined) {
               //獲取到當前選擇行的下標
               var index = datagrid.datagrid("getRowIndex", rows[0]);
               //開啟編輯
               datagrid.datagrid("beginEdit", index);
               //把當前開啟編輯的行賦值給全局變量editRow
               editRow = index;
               //當開啟了當前選擇行的編輯狀態(tài)之后，
               //應(yīng)該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
               datagrid.datagrid("unselectAll");
             }
           }
         }
       }, '-',
       {
         text: '保存', iconCls: 'icon-save', handler: function () {
           //保存時結(jié)束當前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
           datagrid.datagrid("endEdit", editRow);
         }
       }, '-',
       {
         text: '取消編輯', iconCls: 'icon-redo', handler: function () {
           //取消當前編輯行把當前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行
           editRow = undefined;
           datagrid.datagrid("rejectChanges");
           datagrid.datagrid("unselectAll");
         }
       }, '-'],
      onAfterEdit: function (rowIndex, rowData, changes) {
        //endEdit該方法觸發(fā)此事件
        //console.info(rowData);
        //---- Update(ids.join(','));//這是post
        editRow = undefined;
      },
      onDblClickRow: function (rowIndex, rowData) {
        //雙擊開啟編輯行
        if (editRow != undefined) {
          datagrid.datagrid("endEdit", editRow);
        }
        if (editRow == undefined) {
          datagrid.datagrid("beginEdit", rowIndex);
          editRow = rowIndex;
        }
      }
    });
  });

看完了這篇文章，相信你對“jquery+easyui+DataGrid的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！