目录:
基于asp.net + easyui框架,一步步学习easyui-datagrid——界面(一)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除(三)
基于asp.net + easyui框架,一步步学习easyui-datagrid——完成,总结(四)
上周就想更新这篇博客了,但是在做这个界面的过程中,遇到了很多的问题,一时没有解决方案,现在想到了一个,虽然还有点不尽完美,但是能实现项目的基本功能。在下面我会给大家说一下我遇到的困难,并提供实现的代码。
这篇博客的主题是实现对话窗口的添加、编辑和删除。我们总共分成五步:
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>
2、弹出对话窗口的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=" + workerID + "&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'); } } }); } }) } }
这篇博客就不为大家提供一般处理程序的源码了,跟上篇博客是一样的,对datagrid的操作基本就结束了,下面我会进行一下相应的总结,顺便总结一下在做整个项目时的一点心得。
========================================================================================================================
基于asp.net+easyui框架的系列博文:
使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介
Asp.net之真假分页大揭秘、使用AspNetPager实现真分页
Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)
基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载
基于asp.net+ easyui框架,js提交图片,实现先上传图片再提交表单
基于asp.net + easyui框架,一步步学习easyui-datagrid——界面(一)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除(三)
基于asp.net + easyui框架,一步步学习easyui-datagrid——完成,总结(四)
=========================================================================================================================
对于json:不知道怎么传值?不知道返回什么样值?不知道如何拼接json串的童鞋有福了,给大家推荐一篇文章:
http://blog.csdn.net/gxq741718618/article/details/41130509
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip