没有合适的资源?快使用搜索试试~ 我知道了~
首页EasyUI filebox空间上传文件操作说明
资源详情
资源评论
资源推荐
EasyUI Datagird 操作指南
一、页面数据显示
导入 jar 包后,只需在需要配置 datagrid 页面他添加一个
table 标签并设置 id 即可,如下所示:
<div data-options="region:'center',title:'List',iconCls:'icon-search'" style="overflow: hidden;">
<table id="sysAdminList" ></table>
</div>
编写 js 代码,如下所示:
sysAdminList = $("#sysAdminList").datagrid({
url : url,
striped : true,
loadMsg : 'Executing data query, please later...',
rownumbers : true,
singleSelect : false,
pagination : true,
pageSize : 10,
pageList : [10, 20, 30],
fit : true,
fitColumns : true,
nowrap : true,
idField : 'sysadminid',
sortName : 'updatetime',
sortOrder : 'desc',
method : 'get',
multiple : true,
//配置字段信息
columns : [[{
title : 'Id',
field : 'sysadminid',
width : 100,
checkbox : true
},{
title : 'Department',
field : 'sysadmindept',
sortable : true,
width : 100,
align : 'center',
formatter : function(value, row, index) {
if (value == 'admin') {
return '<font color="red">[' + value + ']</font>';
}else {
return '[' + value + ']';
}
},
editor : {
type : 'combobox',
options : {
valueField : 'id',
textField : 'text',
method : 'get',
url : 'res/json/sysAdminDept.json',
required : true,
editable:false,
panelHeight:"auto",
missingMessage:'user department'
}
}
},{
title : 'PortraitUrl',
field : 'sysadminportraiturl',
width : 100,
halign : 'center',
align : 'center',
formatter : function(value, row, index) {
if(value){
return '<img src='+value+' />';
}else{
return '<img src="defaul.jpg"/>';
}
},
editor : {
type : 'filebox',
options : {
accept:'image/gif,image/jpeg',
onChange:function(value, row){
}
}
}
}
]],
//配置工具栏信息
toolbar : [{
id : 'add',
text : 'Add',
iconCls : 'icon-add',
handler : function() {
}
}
],
onAfterEdit : function(rowIndex, rowData, changes) {
},
onLoadSuccess : function(){
sysAdminList.datagrid('clearSelections');
}
});
@RequestMapping(value = "/sysadmins",method = RequestMethod.GET)
@ResponseBody
public DataGridRes getTbSysAdmins(Integer page, Integer rows) {
return sas.getTbSysAdmins(null, page, rows);
}
上述 js 代码实现了 datagrid 从后台获取数据到前台展示的基
本功能,具体参数及其定义不再赘述。需要注意 combobox 和
lebox 在编辑状态时的配置,combobox 需要动态加载后台 json
数据,而 lebox 需要绑定 onChange 事件以便实现文件异步上传
和后台返回上传结果处理后的数据操作。关于 lebox 控件的使用
我们将在第三节详细讲解。
二、页面操作
页面操作包括记录的新增、删除、更新、撤销当前操作以及条
件查询,其中数据的新增和更新只需在 toolbar 相应工具栏的 handler
函数中开启编辑状态即可,前台业务处理逻辑交由 onAfterEdit 函数
中去处理。
1.新增
id : 'add',
text : 'Add',
iconCls : 'icon-add',
handler : function() {
console.info("Add");
if(editFlag == undefined){
sysAdminList.datagrid('unselectAll');
$("#sysAdminList").datagrid('appendRow',
{sysadminnickname:'yaken',sysadmindept:'admin'});
editFlag = $("#sysAdminList").datagrid('getRows').length-1;
$("#sysAdminList").datagrid('beginEdit', editFlag);
}else {
$.messager.alert({
title:'warning',
msg:'Is currently in a state of editing, unable to operate !!!'
});
}
}
上述代码实现了客户点击新增按钮后开启编辑状态功能。首先
设置一个全局变量 editFlag,当有行被选中时该变量将记录改行的索
引,根据该变量是否有值就可以判断当前是否有记录处于编辑状态,
若处于编辑状态则不允许进行新增操作。
若判断为真,则首先将表格所有记录置为未选中状态,然后在
表格末尾利用 appendRow 方法添加一条记录并设置默认值。这里需
要说明的是 combobox 字段设置默认值时只需设置一个字符串即可,
当开启编辑状态后控件会自动将设置的默认值置于选中状态。而
剩余17页未读,继续阅读
正在努力中。。。
- 粉丝: 10
- 资源: 33
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2022年中国足球球迷营销价值报告.pdf
- 房地产培训 -营销总每天在干嘛.pptx
- 黄色简约实用介绍_汇报PPT模板.pptx
- 嵌入式系统原理及应用:第三章 ARM编程简介_3.pdf
- 多媒体应用系统.pptx
- 黄灰配色简约设计精美大气商务汇报PPT模板.pptx
- 用matlab绘制差分方程Z变换-反变换-zplane-residuez-tf2zp-zp2tf-tf2sos-sos2tf-幅相频谱等等.docx
- 网络营销策略-网络营销团队的建立.docx
- 电子商务示范企业申请报告.doc
- 淡雅灰低面风背景完整框架创业商业计划书PPT模板.pptx
- 计算模型与算法技术:10-Iterative Improvement.ppt
- 计算模型与算法技术:9-Greedy Technique.ppt
- 计算模型与算法技术:6-Transform-and-Conquer.ppt
- 云服务安全风险分析研究.pdf
- 软件工程笔记(完整版).doc
- 电子商务网项目实例规划书.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论3