jquery+easyui+DataGrid的示例分析

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

一、簡單示例

HTML

<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="標題"
    idfield="ID" checkbox="true" url="@Url.Action("ListData")">
  <thead>
    <tr>
      <th field="ID" checkbox="true" width="30">
      </th>
      <th field="Name" width="200" align="center">
        名稱
      </th> 
    </tr>
  </thead>
</table>

JS

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

二、基本用法

凍結列

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

去掉分頁

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

更改為

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

或

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

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

復選框以及單選

<table id="tbList"  striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" 
checkbox="true" idfield="Id" url="@Url.Action("ListData")">
<thead>
    <tr>
   　　<th field="Id" checkbox="true" width="150">
    　　</th>
　　　　</tr>
</thead>
</table>

變為單選（添加singleSelect="true"  ）

復制代碼 代碼如下:

<table id="tbList"  striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true"  idfield="Id" url="@Url.Action("ListData")">

加載數據后默認全選：

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

獲取行數

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

隱藏列

<th field="Dept" width="100" hidden="true">名稱</th>

清空原有數據

方法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：載入本地數據，舊記錄將被移除。

行點擊事件

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

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

<script type="text/javascript">
  var List = {};
  List.RadioFormatter = function (value, rec, index) {
    return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
  };

　$(document).ready(　function(){ //呈現列表數據
　　$('#tbList').datagrid({ onClickRow:
      function () {
        //單擊行的時候，將單選按鈕設置為選中
        var id = $('#tbList').datagrid("getSelected");
        $("input[name='name']").each(function () {
          if ($(this).val() == id.Id) {
            $(this).attr("checked", true);
          }
        });
      }
    });
});
</script>
<table id="tbList"  striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
     singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
      <thead>
        <tr>
          <th field="Id" width="30" formatter="PickupList.RadioFormatter">
          </th>
        </tr>
      </thead>
    </table>

 table中td的時間格式問題

1.頁面

 <th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js 

var Common = {
  //EasyUI用DataGrid用日期格式化
  TimeFormatter: function (value, rec, index) {
    if (value == undefined) {
      return "";
    }
    /*json格式時間轉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內容太長自動換行

添加屬性　nowrap="false"

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

行和復選框的分離

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

checkOnSelect="false" selectOnCheck="false"

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

eg.<table checkOnSelect="false"> </table> 

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

設置數據列表的樣式

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

條件查詢

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

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

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

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

解決方案：設置pageNumber為 1

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

 三、行數據的增刪改

HTML（不分頁列表）

復制代碼 代碼如下:

<table id="tbProductList"  fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>

JS

$(document).ready(function () { 
    var datagrid;
    var editRow = undefined;
    datagrid = $("#tbList").datagrid({
      border: true,
      checkbox: true,
      iconCls: 'icon-save', //圖標
      nowap: true, //列內容多時自動折至第二行
      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: '數量', width: 100, align: 'center',
          editor: {
            type: 'numberbox', options: {
              required: true,
              min: 0,
              precision: 0
            }
          }
        }
      ]],
      queryParams: { action: 'query' }, //查詢參數
      toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
          //添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結束編輯
          if (editRow != undefined) {
            datagrid.datagrid("endEdit", editRow);
          }
          //添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
          if (editRow == undefined) {
            datagrid.datagrid("insertRow", {
              index: 0, // index start with 0
              row: {

              }
            });
            //將新插入的那一行開戶編輯狀態
            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);
                 } 
                 //將選擇到的行存入數組并用,分隔轉換成字符串
                 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) {
             //修改之前先關閉已經開啟的編輯行，當調用endEdit該方法時會觸發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;
               //當開啟了當前選擇行的編輯狀態之后，
               //應該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
               datagrid.datagrid("unselectAll");
             }
           }
         }
       }, '-',
       {
         text: '保存', iconCls: 'icon-save', handler: function () {
           //保存時結束當前編輯的行，自動觸發onAfterEdit事件如果要與后臺交互可將數據通過Ajax提交后臺
           datagrid.datagrid("endEdit", editRow);
         }
       }, '-',
       {
         text: '取消編輯', iconCls: 'icon-redo', handler: function () {
           //取消當前編輯行把當前編輯行罷undefined回滾改變的數據,取消選擇的行
           editRow = undefined;
           datagrid.datagrid("rejectChanges");
           datagrid.datagrid("unselectAll");
         }
       }, '-'],
      onAfterEdit: function (rowIndex, rowData, changes) {
        //endEdit該方法觸發此事件
        //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的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！