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" 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"  ）

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

加载数据后默认全选：

 $(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("