详解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 相关文章推荐
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
js 求时间差的实现代码
Apr 26 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP实现微信对账单处理
2018/10/01 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
python编写爬虫小程序
2015/05/14 Python
python语言使用技巧分享
2016/05/31 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python无序链表删除重复项的方法
2020/01/17 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技