jquery easyui DataGrid简单示例

一、简单示例

HTML

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

复选框以及单选

变为单选（添加singleSelect="true" ）

复制代码代码如下:

加载数据后默认全选：

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

获取行数

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

隐藏列

清空原有数据

方法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单击行的时候，将单选按钮设置为选中

名称

table中td的时间格式问题

1.页面

2.js

var Common = {
  //EasyUI用DataGrid用日期格式化
  TimeFormatter: function (value, rec, index) {
    if (value == undefined) {
      return "";
    }
    
    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.

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（不分页列表）

复制代码代码如下:

$(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简单示例

JavaScript相关栏目本月热门文章