`
- 浏览:
99648 次
- 性别:
- 来自:
济南
-
JqueryEasyUi Datagrid数据列表的书写
首先在页面中书写加载datagrid的面中书写加载datagrid的标签
<table id="roleManger"></table>
然后在javascript中书写如下示例代码
$('#roleManger').datagrid({
url : "<%=path%>/role/listRole.do",
title : "",
iconCls : "icon-save",
pagination :true,//分页
pageSize : 10,//每页显示的数量
pageList : [10,20,30,40,50],//
fit : true,//自适应大小
loadMsg:"数据加载中.....",
fitColumns : false,//自适应列 没有横向滚动条
nowarp : false ,//自动折行
border : false,
rownumbers:true,
idFiled :"id",
sortName : "id",
sortOrder : "desc",
onBeforeLoad : function(){
$(this).datagrid('rejectChanges');
},
onDblClickRow : function(rowIndex){
},
columns:[[
{
field:'ck',
checkbox:true
},{
title : '编号',
field : 'id',
width : 100,
hidden : true
},{
title : '名称',
field : 'name',
width : 100,
editor : {
type : 'validatebox',
options : {
required : true
}
},
sortable : true
},{
title:'是否使用',
field:'deleteFlag',
width:100,
editor:{
type:"combobox",
options:{
valueField:'id',//值域
panelHeight : 'auto',//面板高度
textField:'name',//文本域
editable:false,//不可以编辑
data:[{
id:'F',
name:'否'
},{
id:'T',
name:'是'}
],//下拉框中的数据源
required:true}
},
formatter:function(value,rec){
if(value=="T"){
return '<span style="color:red">是</span>';
}else{
return '<span style="color:red">否</span>';
}
}
}]],
toolbar:[{
id:'btnadd',
text:'新增',
enable:insertOperate(),
iconCls:'icon-add',
handler:function(){
addRole();
}
},'-',{
id:'btncut',
text:'修改',
disabled:updateOperate(),
iconCls:'icon-save',
handler:function(){
updateRole();
}
},'-',{
id:'btndelete',
text:'删除',
disabled:deleteOperate(),
iconCls:'icon-remove',
handler:function(){
deleteRoles();
}
},'-',{
id:'btnsave',
text:'保存',
disabled:deleteOperate(),
iconCls:'icon-save',
handler:function(){
if (editRow!=undefined) {
datagrid.datagrid('endEdit', editRow);
}
}
},'-',{
id:'btredo',
text:'取消编辑',
disabled:deleteOperate(),
iconCls:'icon-redo',
handler:function(){
editRow=undefined;
datagrid.datagrid('rejectChanges');
datagrid.datagrid('unselectAll');
}
},'-',{
id:'btredo',
text:'分配权限',
iconCls:'icon-redo',
handler:function(){
distributionAuthority();
}
}
],
onAfterEdit : function(rowIndex, rowData, changes){
if(operateType=="add"){
//保存新增的角色
$.ajax({
type:"POST",
url:"<%=path%>/role/saveByAdd.do",
data:"name="+rowData.name+"&deleteFlag="+rowData.deleteFlag,
dataType:"json",
success:function(data){
$('#roleManger').datagrid('unselectAll');
$('#roleManger').datagrid('reload');
$.messager.show({
title : '提示',
timeout : 5000,
msg : '新增角色成功!'
});
}
});
}else if(operateType=="update"){
$.ajax({
type:"POST",
url:"<%=path%>/role/update.do",
data:"name="+rowData.name+"&deleteFlag="+rowData.deleteFlag+"&id="+rowData.id,
dataType:"json",
success:function(data){
$('#roleManger').datagrid('unselectAll');
[align=left][/align] $('#roleManger').datagrid('reload');
$.messager.show({
title : '提示',
timeout : 5000,
msg : '修改角色成功!'
});
}
});
}
[color=red] //保存完毕更改编辑行为undfined
editRow=undefined;
//保存完毕更改操作状态为undfined
operateType=undefined;
}
});
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
jquery easyui datagrid demo 详解 增删改查
JS EasyUI DataGrid动态加载数据
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery easyui datagrid 教程的部分应用。
easyui Datagrid 数据列表,功能:条件清空、日期控件datetimebox清空、导出excel、搜索、分页、超链接并传值、数据修改和撤销修改功能
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
解决EasyUIdataGrid列比较多,无数据,列展现不全
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
EasyUI DataGrid过滤用法实例
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...