jquery easyui DataGrid簡單示例

更新時間：2017年01月23日 16:03:44 作者：心存善念

本篇文章主要介紹了jquery easyui DataGrid簡單示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、簡單示例

HTML

<table id="tbList" striped="true" rownumbers="true" fix="true" fitcolumns="true" title="標(biāo)題"
    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>

$('#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

復(fù)選框以及單選

<table id="tbList" style="height: 330px;" 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>

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

復(fù)制代碼代碼如下:

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

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

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

獲取行數(shù)

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

隱藏列

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

清空原有數(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ù)，舊記錄將被移除。

行點(diǎn)擊事件

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

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

<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(){ //呈現(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);
          }
        });
      }
    });
});
</script>
<table id="tbList" style="height: 300px;" 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格式時間轉(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è)置寬度，這樣就可以做到當(dāng)文字長度超過規(guī)定的寬度后自動換行了

行和復(fù)選框的分離

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

checkOnSelect="false" selectOnCheck="false"

注意：當(dāng)使用$("#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);
        }
      }
    });

設(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;';//和一般的樣式寫法一樣
          }
        }
      });
  });

條件查詢

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

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

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

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

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

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

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

HTML（不分頁列表）

復(fù)制代碼代碼如下:

<table id="tbProductList" style="height: 500px; max-height: 500px;" fix="true" fitcolumns="true" idfield="ID" url="@Url.Action("ListData")"></table>

$(document).ready(function () { 
    var datagrid;
    var editRow = undefined;
    datagrid = $("#tbList").datagrid({
      border: true,
      checkbox: true,
      iconCls: 'icon-save', //圖標(biāo)
      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);
            //給當(dāng)前編輯的行賦值
            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");
           //如果只選擇了一行則可以進(jìn)行修改，否則不操作
           if (rows.length == 1) {
             //修改之前先關(guān)閉已經(jīng)開啟的編輯行，當(dāng)調(diào)用endEdit該方法時會觸發(fā)onAfterEdit事件
             if (editRow != undefined) {
               datagrid.datagrid("endEdit", editRow);
             }
             //當(dāng)無編輯行時
             if (editRow == undefined) {
               //獲取到當(dāng)前選擇行的下標(biāo)
               var index = datagrid.datagrid("getRowIndex", rows[0]);
               //開啟編輯
               datagrid.datagrid("beginEdit", index);
               //把當(dāng)前開啟編輯的行賦值給全局變量editRow
               editRow = index;
               //當(dāng)開啟了當(dāng)前選擇行的編輯狀態(tài)之后，
               //應(yīng)該取消當(dāng)前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進(jìn)行編輯
               datagrid.datagrid("unselectAll");
             }
           }
         }
       }, '-',
       {
         text: '保存', iconCls: 'icon-save', handler: function () {
           //保存時結(jié)束當(dāng)前編輯的行，自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺
           datagrid.datagrid("endEdit", editRow);
         }
       }, '-',
       {
         text: '取消編輯', iconCls: 'icon-redo', handler: function () {
           //取消當(dāng)前編輯行把當(dāng)前編輯行罷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;
        }
      }
    });
  });

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: