详解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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
Javascript中神奇的this
Jan 20 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 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 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
jquery cookie插件代码类
2009/05/26 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
python查找第k小元素代码分享
2013/12/18 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python中os模块详解
2016/10/14 Python
python日志记录模块实例及改进
2017/02/12 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
django 外键model的互相读取方法
2018/12/15 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python实现低通滤波器代码
2020/02/26 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
合同意向书范本
2014/07/30 职场文书
委托书如何写
2014/08/30 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
高中班主任寄语
2019/06/21 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
mysql幻读详解实例以及解决办法
2022/06/16 MySQL