详解jquery easyui之datagrid使用参考


Posted in Javascript onDecember 05, 2016

本文介绍了jquery easyui之datagrid使用,具体如下:

创建datagrid

在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid。代码如下:

页面上的div标签:

<div id="magazineGrid">
</div>

js代码:

$('#magazineGrid').datagrid({
  height: 340,
  url: 'url',
  method: 'POST',
  queryParams: { 'id': id },
  idField: '产品ID',
  striped: true,
  fitColumns: true,
  singleSelect: false,
  rownumbers: true,
  pagination: false,
  nowrap: false,
  pageSize: 10,
  pageList: [10, 20, 50, 100, 150, 200],
  showFooter: true,
  columns: [[
    { field: 'ck', checkbox: true },
    { field: '刊名', title: '刊名', width: 180, align: 'left' },
    { field: '类别', title: '类别', width: 150, align: 'left' },
    { field: '月份', title: '月份', width: 100, align: 'left' },
    { field: '期次', title: '期次', width: 100, align: 'left' },
    { field: '价格', title: '价格', width: 100, align: 'right' },
    { field: '订阅数', title: '订阅数', width: 100, align: 'right' },
    { field: '库存数', title: '库存数', width: 100, align: 'right' },
    { field: '邮寄方式', title: '邮寄方式', width: 80, align: 'left' },
    { field: '数量', title: '数量', width: 80, align: 'left',
      editor: {
        type: 'numberbox',
        options: {
          min: 0,
          precision: 0
        }
      }
    }
  ]],
  onBeforeLoad: function (param) {
  },
  onLoadSuccess: function (data) {
    
  },
  onLoadError: function () {
    
  },
  onClickCell: function (rowIndex, field, value) {
    
  }
});

ajax请求返回的数据格式

datagrid在创建完成后会根据url请求数据,这是通过ajax来完成的。服务器在完成请求处理后应返回带有rows属性的数据,如果用到分页,还需要有total属性:

var rst = new { total = iTotalCount, rows = entityList };

说到ajax请求,难免需要在请求的时候传入一些查询条件,我通常是在onBeforeLoad事件中添加查询条件的:

onBeforeLoad: function (param) {
  var bId = $("#txtBId").val();
  var AllSearchKey = $("#txtAllSearchKey").val();
  param.bId = bId;
  param.AllSearchKey = AllSearchKey;
}

 分页处理

如果要启用分页,在datagrid配置中,首先要加入如下配置:

pagination: true,

这样一来我们的datagrid底部就会出现一个分页工具栏。

这个时侯,datagrid在请求数据的时候会自动的添加分页的信息:

  • page:当前请求的页码
  • rows:每页要显示的行数

在服务器端获取到这两个参数值,然后通过获取数据库中的总数据行数来完成数据处理。

关于checkbox列

上面的js代码创建的datagrid本身已经添加了checkbox列,就是第一列。checkbox列将会自适应宽度。

{ field: 'ck', checkbox: true },

 关于rownumber列

rownumber列的配置是在全局设置的,如果设置为true则会添加一列来显示行号。

rownumbers: true

行编辑功能的实现

datagrid本身提供了行编辑的功能。只需要两个步骤:

1.设置列的editor属性

2.手动触发编辑

第一步,我们需要在column配置中指明editor,editor有两个属性,type和options,有效的type字符串有:

text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree

options则对应这些控件的具体配置,包括事件等。

editor: {
  type: 'numberbox',
  options: {
    min: 0,
    precision: 0
  }
}

如果不需要特殊的options配置,直接将type字符串赋给editor即可。

editor:'text'

第二步,我们需要监听datagrid的onRowClick事件,或者onCellClick事件,我更愿意监听onCellClick事件,可以根据点击不同的字段来进入编辑模式,并设置单元格编辑控件的focus。

onClickCell: function (rowIndex, field, value) {
  beginEditing(rowIndex, field, value)
}

这里调用了beginEditing方法:

var editIndex = undefined;
var beginEditing = function (rowIndex, field, value) {
  if (field != "数量")
    return;

  if (rowIndex != editIndex) {
    if (endEditing()) {
      $('#magazineGrid').datagrid('beginEdit', rowIndex);
      editIndex = rowIndex;

      var ed = $('#magazineGrid').datagrid('getEditor', { index: rowIndex, field: '数量' });
      $(ed.target).focus().bind('blur', function () {
        endEditing();
      });
    } else {
      $('#magazineGrid').datagrid('selectRow', editIndex);
    }
  }
}
var endEditing = function () {
  if (editIndex == undefined) { return true }
  if ($('#magazineGrid').datagrid('validateRow', editIndex)) {
    var ed = $('#magazineGrid').datagrid('getEditor', { index: editIndex, field: '数量' });
    var number = $(ed.target).numberbox('getValue');
    $('#magazineGrid').datagrid('getRows')[editIndex]['数量'] = number;
    $('#magazineGrid').datagrid('endEdit', editIndex);
    $('#magazineGrid').datagrid('selectRow', editIndex);
    editIndex = undefined;
    return true;
  } else {
    return false;
  }
}

列格式化输出 formatter

在列的配种中设置formatter

formatter: function (value, row, index) {
  if (row.user) {
    return row.user.name;
  } else {
    return value;
  }
}

 使用工具栏

toolbar: [{
  text: 'Add',
  iconCls: 'icon-add',
  handler: function () { alert('add') }
}, {
  text: 'Cut',
  iconCls: 'icon-cut',
  handler: function () { alert('cut') }
}, '-', {
  text: 'Save',
  iconCls: 'icon-save',
  handler: function () { alert('save') }
}],

 使用CardView效果

cardView效果是这样的:

详解jquery easyui之datagrid使用参考

cardView的代码:

var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
  renderRow: function (target, fields, frozen, rowIndex, rowData) {
    var cc = [];
    cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
    if (!frozen) {
      var aa = rowData.itemid.split('-');
      var img = 'shirt' + aa[1] + '.gif';
      cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
      cc.push('<div style="float:left;margin-left:20px;">');
      for (var i = 0; i < fields.length; i++) {
        var copts = $(target).datagrid('getColumnOption', fields[i]);
        cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
      }
      cc.push('</div>');
    }
    cc.push('</td>');
    return cc.join('');
  }
});
$(function () {
  $('#tt').datagrid({
    view: cardview
  });
});

cardView其实是使用了datagrid的view配置,重写了其默认的renderRow方法。基于这种实现,我们可以显示更多样式的view。

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

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 #Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 #Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 #Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 #Javascript
解析Javascript单例模式概念与实例
Dec 05 #Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 #Javascript
深入理解jQuery()方法的构建原理
Dec 05 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python的标准模块包json详解
2017/03/13 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
django 单表操作实例详解
2019/07/30 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
玲玲的画教学反思
2014/02/04 职场文书
记账会计岗位职责
2014/06/16 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
招标保密承诺书
2015/01/20 职场文书