jquery easyui DataGrid简单示例


Posted in Javascript onJanuary 23, 2017

一、简单示例

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("unselectAll");
      $('#tbList').datagrid({ pageNumber: 1,queryParams: { SearchName: $("#SearchName").val() } });
    });

 三、行数据的增删改

HTML(不分页列表)

<table id="tbProductList" style="height: 500px; max-height: 500px;" 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;
        }
      }
    });
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
浅谈javascript的闭包
Jan 23 #Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 #Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 #Javascript
Node.js Express 框架 POST方法详解
Jan 23 #Javascript
js 颜色选择插件
Jan 23 #Javascript
JavaScript常用正则函数用法示例
Jan 23 #Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 #Javascript
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
vue axios用法教程详解
2017/07/23 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python列表使用实现名字管理系统
2019/01/30 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python字符串三种格式化输出
2020/09/17 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
英文商务邀请信
2014/01/22 职场文书
公司离职证明标准样本
2014/10/05 职场文书
自我推荐信怎么写
2015/03/24 职场文书