API文档:【http://www.jeasyui.com/documentation/datagrid.php

一、创建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效果是这样的:

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="data: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。

datagrid——jQuery EasyUI的更多相关文章

  1. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  2. jQuery EasyUI教程之datagrid应用(三)

    今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...

  3. jQuery EasyUI教程之datagrid应用(二)

    上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...

  4. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  5. jQuery EasyUI教程之datagrid应用(一)

    最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...

  6. Jquery EasyUI DataGrid .net实例

    前台界面:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  8. Jquery easyui datagrid 删除多行问题

    http://www.cnblogs.com/Dtscal/archive/2012/07/04/2576639.html 最近模仿了刘冬大哥的<开源框架完美组合之Spring.NET + NH ...

  9. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

随机推荐

  1. 清北学堂提高组突破营游记day3

    讲课人更换成dms. 真的今天快把我们逼疯了.. 今天主攻数据结构, 基本上看完我博客能理解个大概把, 1.LCA 安利之前个人博客链接.之前自己学过QWQ. 2.st表.同上. 3.字符串哈希.同上 ...

  2. The Preliminary Contest for ICPC Asia Nanchang 2019 E. Magic Master

    题目:https://nanti.jisuanke.com/t/41352 思路:约瑟夫环 由题意得第k张牌即求 k 为 第几个 报数为m+1 的单位 用队列模拟即可 #include<bits ...

  3. 手动解析网易云音乐MP3真实地址

    火狐打开音乐播放页面 然后按F12 点击网络选项卡 点击音乐播放按钮 然后过滤输入“url” 选中筛选出来的结果 点击右边的相应选项卡 下面的url里面就是真实的预约MP3地址

  4. 【leetcode】1250. Check If It Is a Good Array

    题目如下: Given an array nums of positive integers. Your task is to select some subset of nums, multiply ...

  5. AOP xml 配置

    applicationContext.xml <!--切面Bean--> <bean id ="aspectbean" class='"con.soft ...

  6. ORACLE/SQL用函数进行每年,每月,每周,每日的数据汇总

    15/03/21  用函数进行每年,每月,每周,每日的数据汇总 假设一个销售明细表 sale_detail 含有 国家(country),销售时间(sale_time),销售额(sale_money) ...

  7. Protocol Buffers 开发者指南

    欢迎来到 protocol buffers 的开发者指南.protocol buffers 是一个语言中立,平台中立针对通讯协议,数据存储和其他领域中对结构化数据进行序列化的扩展方法. 本文档主要针对 ...

  8. TTTTTTTTTTTTTTTT POJ 2723 楼层里救朋友 2-SAT+二分

    Get Luffy Out Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8211   Accepted: 3162 Des ...

  9. TTTTTTTTTTTTTTTTT CF #182 div1 B floyd

    题意: 有 n(3≤n≤100) 个站点,当第一次到达站点 u 的时候会增加寿命 au(1≤au≤103),题目给了 n 个站点的二位空间坐标,每两个站点之间的距离为曼哈顿距离(dis(i, j)=| ...

  10. 安装python第三方模块

    下载 第三方模块的下载地址:https://pypi.python.org/pypi 其他版本的第三方模块下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs ...