这篇博客的主题是实现对话窗口的添加、编辑和删除。我们总共分成五步：
1、制作对话窗口html
-
<%-- 弹出操作框--%>
-
<div id="dlg" class="easyui-dialog" style="width: 400px; height: auto; padding: 10px 20px"
-
data-options="closed:true,buttons:'#dlg-buttons'"> <%--closed="true" buttons="#dlg-buttons"--%>
-
<div class="ftitle">管理员信息</div>
-
<form id="fm" method="post">
-
<div class="fitem">
-
<label>用户名：</label>
-
<input id="firstname" name="firstname" class="easyui-validatebox" data-options="required:true"/>
-
</div>
-
<div class="fitem">
-
<label>密码：</label>
-
<input id="password" name="password" class="easyui-validatebox" data-options="required:true"/>
-
<input name="Test" id="test" type="hidden" />
-
<input name="AdminID" id="AdminID" type="hidden" />
-
<input id="key" name="key" onkeydown= "if(event.keyCode==13)reloadgrid()" type="hidden"/>
-
</div>
-
<div class="fitem">
-
<label>员工姓名:</label>
-
<input id="workerName" name="workerName" class="easyui-combobox"/>
-
</div>
-
<div class="fitem">
-
<label>权限:</label>
-
<input id="adminRightName" name="adminRightName" class="easyui-combobox"/>
-
</div>
-
-
<div class="fitem">
-
<label>备注:</label>
-
<textarea id="message" name="message" style="width:150px;"></textarea>
-
</div>
-
</form>
-
</div>
-
<div id="dlg-buttons">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">保存</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
-
</div>
弹出对话窗口的js
-
//添加管理员
-
function newUser() {
-
//清空内容
-
$('#fm').form('clear');
-
//加载工作人员的姓名和权限
-
loadWorkerNameAndRightName();
-
-
$('#dlg').dialog('open').dialog('setTitle', '添加管理员');
-
document.getElementById("test").value = "add";
-
}
-
-
//修改管理员
-
function editUser() {
-
-
var row = $('#tt').datagrid('getSelected');
-
-
if (row == null) {
-
$.messager.alert("提示", "请选择要修改的行！", "info");
-
}
-
-
//加载工作人员的姓名和权限
-
loadWorkerNameAndRightName()
-
if (row) {
-
-
//获取要修改的字段
-
$('#firstname').val(row.AdminName);
-
$('#password').val(row.AdminPassword);
-
//$('#adminRightName').val(row.AdminRightName);
-
//$('#adminRightName').combobox('setValue', row.AdminRightName);
-
////$('#workerName').val(row.WorkerRealName);
-
//$('#workerName').combobox('setValue', row.WorkerRealName);
-
$('#message').val(row.AdminState)
-
$('#dlg').dialog('open').dialog('setTitle', '修改管理员');
-
document.getElementById("test").value = "modify";
-
$('#fm').form('load', row);
-
-
}
-
}
-
3.实现对话框中下拉框的动态加载
在博客开头为大家设置了一个悬念，在实现过程中遇到了困难，就是在下拉框动态加载数据时，显示的是一个数据库信息，更新的时候要更新此显示信息的数据库主键。多个下拉框的实现方案和一个下拉框是一样的。
解决方案：
只需要调用一般处理程序，将所需数据转化成json作为返回值，发送到界面端，显示在下拉框中的数据绑定到combobox的textField属性中，需要更新的数据绑定到valueField属性中，此时一切都ok了。
实现效果：
实现代码js：
-
//加载工作人员的姓名和权限
-
function loadWorkerNameAndRightName() {
-
var queryWorkerName = "SetAdmin.ashx?test=queryWorkerName";
-
$.getJSON(queryWorkerName, function (json) {
-
$('#workerName').combobox({
-
data: json.rows,
-
valueField: 'WorkerID',
-
textField: 'WorkerRealName',
-
required: 'true',
-
editable: 'false'
-
});
-
})
-
-
var queryRightName = "SetAdmin.ashx?test=queryRightName";
-
$.getJSON(queryRightName, function (json) {
-
$('#adminRightName').combobox({
-
data: json.rows,
-
valueField: 'AdminRightID',
-
textField: 'AdminRightName',
-
required: 'true',
-
panelHeight: 'auto'
-
});
-
})
-
-
}
4.实现对话窗口的保存和取消功能
-
//保存信息
-
function saveUser() {
-
-
var firstname = document.getElementById("firstname").value;
-
var password = document.getElementById("password").value;
-
var workerID = $("#workerName").combobox("getValue");;
-
var adminRightID = $("#adminRightName").combobox("getValue");
-
var message = document.getElementById("message").value;
-
-
var test = document.getElementById("test").value;
-
-
if (test == "add") {
-
$('#fm').form('submit', {
-
url: "SetAdmin.ashx?test=" + test + "&firstname=" + firstname + "&password=" + password + "&workerID=" + workerID +
-
adminRightID=" + adminRightID + "&message=" + message,
-
onSubmit: function () {
-
return $(this).form('validate');
-
},
-
success: function (result) {
-
if (result.indexOf("T") == 0) {
-
$('#dlg').dialog('close');
-
$.messager.alert("提示", "恭喜您，信息添加成功", "info");
-
//alert('恭喜您，信息添加成功！')
-
// close the dialog
-
$('#tt').datagrid('reload');
-
//$('#fm').form('submit');
-
-
}
-
else {
-
$.messager.alert("提示", "添加失败，请重新操作！", "info");
-
return;
-
//alert('添加失败，请重新操作！')
-
}
-
-
//var result = eval('(' + result + ')');
-
-
//if (result.success) {
-
// $('#dlg').dialog('close'); // close the dialog
-
// $('#tt').datagrid('reload'); // reload the user data
-
//} else {
-
// $.messager.show({
-
// title: 'Error',
-
// msg: result.msg
-
// });
-
//}
-
}
-
});
-
-
} else {
-
var row = $('#tt').datagrid('getSelected');
-
if (row) {
-
//获取要修改的字段
-
var adminID = row.AdminID;
-
}
-
$('#fm').form('submit', {
-
url: "SetAdmin.ashx?test=" + test + "&adminID=" + adminID + "&firstname=" + firstname + "&password=" + password + "&workerID=" +
-
ID + "&adminRightID=" + adminRightID + "&message=" + message,
-
onSubmit: function () {
-
return $(this).form('validate');
-
},
-
success: function (result) {
-
if (result.indexOf("T") == 0) {
-
$('#dlg').dialog('close');
-
$('#tt').datagrid('clearSelections'); //清空选中的行
-
$.messager.alert("提示", "恭喜您，信息修改成功", "info");
-
//alert('恭喜您，信息添加成功！')
-
// close the dialog
-
$('#tt').datagrid('reload');
-
$('#fm').form('submit');
-
-
}
-
else {
-
$.messager.alert("提示", "修改失败，请重新操作！", "info");
-
return;
-
//alert('添加失败，请重新操作！')
-
}
-
-
//var result = eval('(' + result + ')');
-
-
//if (result.success) {
-
// $('#dlg').dialog('close'); // close the dialog
-
// $('#tt').datagrid('reload'); // reload the user data
-
//} else {
-
// $.messager.show({
-
// title: 'Error',
-
// msg: result.msg
-
// });
-
//}
-
}
-
});
-
}
-
}
5.实现删除功能
-
//删除管理员
-
function removeUser() {
-
var test = document.getElementById("test").value = "delete";
-
var row = $('#tt').datagrid('getSelected');
-
if (row == null) {
-
$.messager.alert("提示", "请选择要删除的行！", "info");
-
}
-
if (row) {
-
$.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {
-
if (r) {
-
$('#fm').form('submit', {
-
url: 'SetAdmin.ashx/ProcessRequest?AdminID=' + row.AdminID + "&test=" + test,
-
onSubmit: function () {
-
//return $(this).form('validate');
-
},
-
success: function (result) {
-
if (result.indexOf("T") == 0) {
-
$('#dlg').dialog('close');
-
$('#tt').datagrid('clearSelections'); //清空选中的行
-
$.messager.alert("提示", "恭喜您，信息删除成功！", "info");
-
//alert('恭喜您，信息删除成功！')
-
// close the dialog
-
$('#tt').datagrid('reload');
-
$('#fm').form('submit');
-
-
}
-
else {
-
$.messager.alert("提示", "添加失败，请重新操作！", "info");
-
//alert('添加失败，请重新操作！')
-
return;
-
//$('#fm').form('submit');
-
}
-
-
}
-
-
});
-
}
-
})
-
}
-
}
-
相关文章：
-
2021-05-28
-
2021-11-14
-
2021-09-05
-
2021-08-30
-
2022-12-23
-
2022-12-23
-
2021-08-30