jQuery EasyUI - 数据表格(DataGrid)
由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格。
1、加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid
<!-- 加载jquery -->
<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
<!-- 加载jquery-easyui -->
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
2、界面设置table,确定其id
<table id="personManage"></table>
3、编写js代码
var objTable=$("#personManage");
objTable.datagrid({ pagination: true,
url:'${ctx}/cpv3QuotationCtrl/query?RndId='+Math.random(),
loadFilter:pagerFilter,
queryParams:buildParams(),
toolbar:"#toolbar",
rownumbers:true,
width:Number($("fieldset").css("width").replace("px",""))+20,
columns: [[
{ field: 'MD5_SIGNATURE',hidden:true},
{ field: 'TMPE', title: '选择',align:'center', width: 50,formatter:formatter_Select},
{ field: 'QUOTATION_NAME', title: '报价单名称', width:100,align:'center'},
{ field: 'QUOTATION_STATUS', title: '报价单状态', width: 100,align:'center',formatter:formatter_common_quotation},
{ field: 'TOTAL_PLAN_COST', title: '总预估成本', width:100,align:'center'},
{ field: 'QUOTATION_AMOUNT', title: '报价总金额', width:100,align:'center'},
{ field: 'QUOTATION_VERSION', title: '报价单版本', width:100,align:'center'},
{ field: 'CREATE_USER_ID', title: '创建人', width:100,align:'center'},
{ field: 'CREATE_TIME', title: '创建时间', width:100,align:'center',formatter: formatDatebox},
{ field: 'MODIFY_TIME', title: '最后修改时间', width:100,align:'center',formatter: formatDatebox}
]],
fitColumns:true //自适应宽度、可以水平滚动
});
设置datagrid参数。参数也可以直接加在url上:url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,
/**创建查询参数**/
function buildParams(){
var name=$("#name").val();
var projectId = "${projectId}";
var quotation_type=$("#quotation_type").combobox("getValue");
return {
name:name,
projectId:projectId,
quotation_type:quotation_type
};
}
4、编写action层代码或control
Map<String,String> params= new HashMap<String,String>();
try{
//前台获取查询条件
String projectId = StringUtils.trimToEmpty(request.getParameter("projectId"));
params.put("name",StringUtils.trimToEmpty(request.getParameter("name")));//报价单名称
params.put("quotation_type",StringUtils.trimToEmpty(request.getParameter("quotation_type")));//报价单状态 //传入分页参数
params.put("page",StringUtils.trimToEmpty(request.getParameter("page")));
params.put("rows",StringUtils.trimToEmpty(request.getParameter("rows")));
//查询封装数据
return this.quotationService.queryAllQuotationByProject(params,projectId);
}catch(Exception e){
throw new ControllerException("",e);
}
其中的page由datagrid传入,当用户在datagrid左下角选择每页显示的行数时,datagrid会将该值已参数形式附加到url后面传入action中,名字就叫page,还要将结果总行数total传给datagrid,用于分页
不知道是datagrid配置有误还是datagrid的bug,datagrid的结果集和每页显示的行数都叫rows,重名了
解决办法如上,结果集还是叫rows,但是List的类型改为Object而不能用实体的类型,每页显示的行数通过request获取。List<Map<String, Object>> list。
页面通过ajax调用datagrid方法就能直接显示表的数据了。此外也可以直接写好thead,tbody数据由datagrid传入。
<table id="projectGrid"
data-options="
pagination:true,
pagePosition:'bottom',
fitColumns:false,
enableHeaderClickMenu:false,
singleSelect:false,
autoRowHeight:true,
nowrap:true"> <thead data-options="frozen:true">
<tr>
<th data-options="field:'aa',checkbox:true"></th>
<th data-options="field:'projectId'">项目编号</th>
<th data-options="field:'projectName',width:150,align:'center'">
项目名称
</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'friendName',width:100,align:'center'">
客户全称
</th>
$("#projectGrid").datagrid({
url:'${ctx}/cpv3ProjectCtrl/getProjectList?ram='+Math.random(),
queryParams:$.serializeObject($('#searchForm'))
});
详情可以查看datagrid的官方API或翻译API:
【转】http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。
依赖
- panel
- resizable
- linkbutton
- pagination
用法
- <table id="tt"></table>
- $('#tt').datagrid({
- url:'datagrid_data.json',
- columns:[[
- {field:'code',title:'Code',width:100},
- {field:'name',title:'Name',width:100},
- {field:'price',title:'Price',width:100,align:'right'}
- ]]
- });
数据表格(DataGrid)的特性
其特性扩展自 panel,下列是为 datagrid 增加的特性。
名称 |
类型 |
说明 |
默认值 |
columns |
array |
datagrid 的 column 的配置对象,更多详细请参见 column 的特性。 |
null |
frozenColumns |
array |
和列的特性一样,但是这些列将被冻结在左边。 |
null |
fitColumns |
boolean |
True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 |
false |
striped |
boolean |
True 就把行条纹化。(即奇偶行使用不同背景色) |
false |
method |
string |
请求远程数据的 method 类型。 |
post |
nowrap |
boolean |
True 就会把数据显示在一行里。 |
true |
idField |
string |
标识字段。 |
null |
url |
string |
从远程站点请求数据的 URL。 |
null |
loadMsg |
string |
当从远程站点加载数据时,显示的提示信息。 |
Processing, please wait … |
pagination |
boolean |
True 就会在 datagrid 的底部显示分页栏。 |
false |
rownumbers |
boolean |
True 就会显示行号的列。 |
false |
singleSelect |
boolean |
True 就会只允许选中一行。 |
false |
pageNumber |
number |
当设置了 pagination 特性时,初始化页码。 |
1 |
pageSize |
number |
当设置了 pagination 特性时,初始化页码尺寸。 |
10 |
pageList |
array |
当设置了 pagination 特性时,初始化页面尺寸的选择列表。 |
[10,20,30,40,50] |
queryParams |
object |
当请求远程数据时,发送的额外参数。 |
{} |
sortName |
string |
定义可以排序的列。 |
null |
sortOrder |
string |
定义列的排序顺序,只能用 'asc' 或 'desc'。 |
asc |
remoteSort |
boolean |
定义是否从服务器给数据排序。 |
true |
showFooter |
boolean |
定义是否显示一行页脚。 |
false |
rowStyler |
function |
返回例如 'background:red' 的样式,该函数需要两个参数: |
|
loadFilter |
function |
返回过滤的数据去显示。这个函数需要一个参数 'data' ,表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。 |
|
editors |
object |
定义编辑行时的 editor 。 |
预定义的 editor |
view |
object |
定义 datagrid 的 view 。 |
默认的 view |
列(Column)的特性
DataGrid 的 Column 是一个数组对象,它的每个元素也是一个数组。数组元素的元素是一个配置对象,它定义了每个列的字段。
代码示例:
- columns:[[
- {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
- {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
- {title:'Item Details',colspan:4}
- ],[
- {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
- {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
- {field:'attr1',title:'Attribute',width:100},
- {field:'status',title:'Status',width:60}
10. ]]
名称 |
类型 |
说明 |
默认值 |
title |
string |
列的标题文字。 |
undefined |
field |
string |
列的字段名。 |
undefined |
width |
number |
列的宽度。 |
undefined |
rowspan |
number |
指一个单元格占据多少行。 |
undefined |
colspan |
number |
指一个单元格占据多少列。 |
undefined |
align |
string |
指如何对齐此列的数据,可以用 'left'、'right'、'center'。 |
undefined |
sortable |
boolean |
True 就允许此列被排序。 |
undefined |
resizable |
boolean |
True 就允许此列被调整尺寸。 |
undefined |
hidden |
boolean |
True 就隐藏此列。 |
undefined |
checkbox |
boolean |
True 就显示 checkbox。 |
undefined |
formatter |
function |
单元格的格式化函数,需要三个参数: |
undefined |
styler |
function |
单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 'background:red' 。此函数需要三个参数: |
undefined |
sorter |
function |
自定义字段的排序函数,需要两个参数: |
undefined |
editor |
string,object |
指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 |
undefined |
编辑器(Editor)
用 $.fn.datagrid.defaults.editors 重写了 defaults。
每个编辑器有下列行为:
名称 |
参数 |
说明 |
init |
container, options |
初始化编辑器并且返回目标对象。 |
destroy |
target |
如果必要就销毁编辑器。 |
getValue |
target |
从编辑器的文本返回值。 |
setValue |
target , value |
给编辑器设置值。 |
resize |
target , width |
如果必要就调整编辑器的尺寸。 |
例如,文本编辑器(text editor)像下面这样定义:
- $.extend($.fn.datagrid.defaults.editors, {
- text: {
- init: function(container, options){
- var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
- return input;
- },
- getValue: function(target){
- return $(target).val();
- },
- 10. setValue: function(target, value){
- 11. $(target).val(value);
- 12. },
- 13. resize: function(target, width){
- 14. var input = $(target);
- 15. if ($.boxModel == true){
- 16. input.width(width - (input.outerWidth() - input.width()));
- 17. } else {
- 18. input.width(width);
- 19. }
- 20. }
- 21. }
22. });
数据表格视图(DataGrid View)
用 $.fn.datagrid.defaults.view 重写了 defaults。
view 是一个对象,它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。
名称 |
参数 |
说明 |
render |
target, container, frozen |
当数据加载时调用。 |
renderFooter |
target, container, frozen |
这是呈现行脚选项的函数。 |
renderRow |
target, fields, frozen, rowIndex, rowData |
这是选项的函数,将会被 render 函数调用。 |
refreshRow |
target, rowIndex |
定义如何刷新指定的行。 |
onBeforeRender |
target, rows |
视图被呈现前触发。 |
onAfterRender |
target |
视图被呈现后触发。 |
事件
其事件扩展自 panel,下列是为 datagrid 增加的事件。
名称 |
参数 |
说明 |
onLoadSuccess |
data |
当数据加载成功时触发。 |
onLoadError |
none |
加载远程数据发生某些错误时触发。 |
onBeforeLoad |
param |
发送加载数据的请求前触发,如果返回 false加载动作就会取消。 |
onClickRow |
rowIndex, rowData |
当用户点击一行时触发,参数包括: |
onDblClickRow |
rowIndex, rowData |
当用户双击一行时触发,参数包括: |
onClickCell |
rowIndex, field, value |
当用户单击一个单元格时触发。 |
onDblClickCell |
rowIndex, field, value |
当用户双击一个单元格时触发。 |
onSortColumn |
sort, order |
当用户对一列进行排序时触发,参数包括: |
onResizeColumn |
field, width |
当用户调整列的尺寸时触发。 |
onSelect |
rowIndex, rowData |
当用户选中一行时触发,参数包括: |
onUnselect |
rowIndex, rowData |
当用户取消选择一行时触发,参数包括: |
onSelectAll |
rows |
当用户选中全部行时触发。 |
onUnselectAll |
rows |
当用户取消选中全部行时触发。 |
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑一行时触发,参数包括: |
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑一行时触发,参数包括: |
onCancelEdit |
rowIndex, rowData |
当用户取消编辑一行时触发,参数包括: |
onHeaderContextMenu |
e, field |
当 datagrid 的头部被右键单击时触发。 |
onRowContextMenu |
e, rowIndex, rowData |
当右键点击行时触发。 |
方法
名称 |
参数 |
说明 |
options |
none |
返回 options 对象。 |
getPager |
none |
返回 pager 对象。 |
getPanel |
none |
返回 panel 对象。 |
getColumnFields |
frozen |
返回列的字段,如果 frozen 设定为 true,冻结列的字段被返回。 |
getColumnOption |
field |
返回指定列的选项。 |
resize |
param |
调整尺寸和布局。 |
load |
param |
加载并显示第一页的行,如果指定 param 参数,它将替换 queryParams 特性。 |
reload |
param |
重新加载行,就像 load 方法一样,但是保持在当前页。 |
reloadFooter |
footer |
重新加载脚部的行。 |
loading |
none |
显示正在加载状态。 |
loaded |
none |
隐藏正在加载状态。 |
fitColumns |
none |
使列自动展开/折叠以适应 datagrid 的宽度。 |
fixColumnSize |
none |
固定列的尺寸。 |
fixRowHeight |
index |
固定指定行的高度。 |
loadData |
data |
加载本地数据,旧的行会被移除。 |
getData |
none |
返回加载的数据。 |
getRows |
none |
返回当前页的行。 |
getFooterRows |
none |
返回脚部的行。 |
getRowIndex |
row |
返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。 |
getSelected |
none |
返回第一个选中的行或者 null。 |
getSelections |
none |
返回所有选中的行,当没有选中的记录时,将返回空数组。 |
clearSelections |
none |
清除所有的选择。 |
selectAll |
none |
选中当前页所有的行。 |
unselectAll |
none |
取消选中当前页所有的行。 |
selectRow |
index |
选中一行,行索引从 0 开始。 |
selectRecord |
idValue |
通过 id 的值做参数选中一行。 |
unselectRow |
index |
取消选中一行。 |
beginEdit |
index |
开始对一行进行编辑。 |
endEdit |
index |
结束对一行进行编辑。 |
cancelEdit |
index |
取消对一行进行编辑。 |
getEditors |
index |
获取指定行的编辑器们。每个编辑器有下列特性: |
getEditor |
options |
获取指定的编辑器, options 参数包含两个特性: |
refreshRow |
index |
刷新一行。 |
validateRow |
index |
验证指定的行,有效时返回 true。 |
updateRow |
param |
更新指定的行, param 参数包含下列特性: |
appendRow |
row |
追加一个新行。 |
insertRow |
param |
插入一个新行, param 参数包括下列特性: |
deleteRow |
index |
删除一行。 |
getChanges |
type |
获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。 当 type 参数没有分配时,返回所有改变的行。 |
acceptChanges |
none |
提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。 |
rejectChanges |
none |
回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。 |
mergeCells |
options |
把一些单元格合并为一个单元格,options 参数包括下列特性: |
showColumn |
field |
显示指定的列。 |
hideColumn |
field |
隐藏指定的列。 |
jQuery EasyUI - 数据表格(DataGrid)的更多相关文章
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- easyUI数据表格datagrid之笔记2
/**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...
- easyUI数据表格datagrid之分页
一.分页函数 /**========================================= * 分页函数 */function pagerFilter(data) { if(typeof ...
- easyUI数据表格datagrid之笔记
1.用ajax获取数据库数据 /**========================================= * 读取数据库信息,使用ajax的load方法 */function getMe ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- jQuery EasyUI教程之datagrid应用(三)
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用(一)
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- jQuery EasyUI 数据网格
jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格 本节将介绍jQuery EasyUI数据网格的运用,主要内容为如何将HTML表格转换为数据网格. 本实例演示如何转换表格(ta ...
- jQuery EasyUI教程之datagrid应用(二)
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...
随机推荐
- Ionic学习笔记4_ionic路由(页面切换)
1.1. ionic路由机制: 状态 1.2. ion-nav-view <body ng-controller="firstCtrl"> <a class= ...
- intent 启动activity、service的方法
1.通过intent启动service. 通过传递一个Intent对象至Context.startService()将启动一个服务(或给予正在运行的服务以一个新的指令).Android调用服务的onS ...
- 敏捷开发 scrum管理
项目准备阶段 1.产品经理将整体项目拆分成不同的单独模块,每个模块尽量细化到能够自成一体.例如app的登录注册模块,不能仅仅就是登录注册这两个界面,而是要将所有与这有关的需求整合到一块.要达到的效果就 ...
- error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution
解决编译php扩展xsl时出现 error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution ...
- AtCoder Regular Contest 070 D - No Need 想法:利用单调性二分+bitset优化
/** 题目:D - No Need 链接:http://arc070.contest.atcoder.jp/tasks/arc070_b 题意:给出N个数,从中选出一个子集,若子集和大于等于K,则这 ...
- TP5 Session Db驱动
一.下载附件,解压,文件路径\extend\driver\session\Db.php 驱动文件下载:Db.php 二.创建数据表 DROP TABLE IF EXISTS `platform_ses ...
- Eclipse 工作空间(Workspace)
Eclipse 工作空间(Workspace) eclipse 工作空间包含以下资源: 项目 文件 文件夹 项目启动时一般可以设置工作空间,你可以将其设置为默认工作空间,下次启动后无需再配置: 工作空 ...
- ApiDoc 和 Swagger 接口文档
ApiDoc:https://blog.csdn.net/weixin_38682852/article/details/78812244 Swagger git: https://github.co ...
- Android开发者必知的5个开源库
摘要:过去的时间里,Android开发逐步走向成熟.而无论出现多少Android相关的开发工具,我们每天使用的大量开源库却始终是不可或缺的.这里,向大家介绍的是,这个任劳任怨的大家庭中,最受开发者喜爱 ...
- Oracle Delete与系统资源
在用Delete删除数据时,SQL语句首先要通过全表扫描或索引扫描找到符合条件的记录并删除. 然而在这个过程中将消耗大量的CPU资源,I/O资源以及UNDO数据. 如果删除的数据量较大,将极大的影响系 ...