场景设置:在一个edatagrid中进行表格参数的编辑,鼠标双击是进行表 个编辑,点击添加按钮时,在提交,取消时,取消上一步操作,图:
前台页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="rolelist-btn"></div>
<div id="roletb-btn">
<a id="role-add" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
<a id="role-save" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a id="role-clear" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" id="roledele-btn">删除</a>
<a id="role-give" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-lock'">分配权限</a>
<a id="role-add2" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">窗口添加</a>
<a id="role-update2" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">窗口修改</a>
</div>
<div id="rolegive"></div>
<script>
//修改
$("#role-update2").click(function () {
var arrs=$("#rolelist-btn").datagrid("getSelections");
if(arrs.length!=1){
alert("请选择一条要修改的数据")
}
$("body").append("<div id='roleupdate-dialog'></div>")
$("#roleupdate-dialog").dialog({
title:'修改窗口',
width:500,
height:400,
href:'${pageContext.request.contextPath}/role/toupdate?id='+arrs[0].id,
modal:true,
buttons:[{//底部按钮
text:'保存',
iconCls:'icon-sava',
handler:function(){
$("#roleadd").submit();
}
},{
text:'关闭',
iconCls:'icon-cancel',
handler:function(){
alert("关闭操作窗口");
$("#roleadd-dialog").dialog("destroy");
}
}]
})
})
//窗口添加
$("#role-add2").click(function(){
$("body").append("<div id='roleadd-dialog'></div>");
$("#roleadd-dialog").dialog({
title:'添加窗口',
width:500,
height:400,
href:'${pageContext.request.contextPath}/role/toadd2',
modal:true,
buttons:[{//底部按钮
text:'保存',
iconCls:'icon-sava',
handler:function(){
$("[name=resIds]").val();
$("#roleadd").submit();
}
},{
text:'关闭',
iconCls:'icon-cancel',
handler:function(){
alert("关闭操作窗口");
$("#roleadd-dialog").dialog("destroy");
}
}]
})
})
$("#role-give").click(function(){
var arr=$("#rolelist-btn").edatagrid("getSelections");
if(arr.length!=1){
alert("请选择一条数据");return
}
$("#rolegive").dialog({
title:'权限分配',
width:500,
height:450,
modal:true,
href:'${pageContext.request.contextPath}/role/findRoleId?id='+arr[0].id,
})
});
// 添加
$("#role-add").click(function () {
$("#rolelist-btn").edatagrid("addRow");
});
// 保存
$("#role-save").click(function () {
$("#rolelist-btn").edatagrid("saveRow");
});
//取消编辑
$("#role-clear").click(function () {
$("#rolelist-btn").edatagrid("cancelRow");
});
//删除
$("#roledele-btn").click(function () {
$("#rolelist-btn").edatagrid("destroyRow");
});
$("#rolelist-btn").edatagrid({
url:'${pageContext.request.contextPath}/role/list',
fit:true,
fitColumns:true,
singleSelect:false,
pagination:true,
idField:"id",
saveUrl:'${pageContext.request.contextPath}/role/add',//保存地址
updateUrl:'${pageContext.request.contextPath}/role/add',//修改地址
destroyUrl:"${pageContext.request.contextPath}/role/dele",//删除地址
rownumbers:true,
pageSize:3,
pageList:[3,6,9],
toolbar:'#roletb-btn',
destroyMsg:{
norecord:{ // 在没有记录选择的时候执行
title:'提示信息',
msg:'请选择要删除的行'
},
confirm:{ // 在选择一行的时候执行
title:'提示信息',
msg:'确认删除吗?此操作不可恢复!!'
}
},
columns:[[
{title:'角色编号',field:'id',width:70,checkbox:true},
{title:'角色名称',field:'roleName',width:70,
editor:{
type:'text',
options:{
required:true
}
}
},
{title:'角色描述',field:'roleDesc',width:70,
editor:{
type:'text',
options:{
required:true
}
}
},
{title:'添加时间',field:'createDate',width:70,
},
{title:'角色状态',field:'roleState',width:70,
formatter:function(value,row,index){
if(value==1){
return '激活';
}else{
return '停用';
}
},
editor:{
type:'combobox',
options:{
valueField:'label',
textField:'value',
data:[{
label:'1',
value:'激活'
},{
label:'2',
value:'停用'
}]
}
}
},
]],
onSuccess:function(data){
if(typeof data == "string") {
data = JSON.parse(data);
}
if(data.status ==200){
$.messager.alert("消息提醒","操作成功");
$("#rolelist-btn").edatagrid("reload");
}else{
$.messager.alert("消息提醒","操作失败");
}
}
})
</script>