详解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 相关文章推荐
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
js实现tab切换效果
Feb 16 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
微信小程序 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
2014年清明节寄语
2014/04/03 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
鉴定评语大全
2014/05/05 职场文书
2014年大学班级工作总结
2014/11/14 职场文书