一、簡單示例
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" 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>變為單選（添加singleSelect="true" ）
加載數據后默認全選：
$(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" 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格式時間轉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（不分頁列表）
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; } } }); });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
