实现jqgrid 行编辑，级联查询，并点击按钮保存
来源：互联网 发布：淘宝twizzlers扭扭糖 编辑：程序博客网 时间：2024/04/30 19:24
业务要求，直接在table里面修改数据，并保存到数据库。
级联查询主要是通过change事件来变化
点击出现行编辑：
$("#jqGrid").jqGrid( { url: "${pageContext.request.contextPath}/admin/tlocks_installTlocksList.action", mtype: 'POST', datatype: "json", height: 350, autowidth: true, shrinkToFit: true, rowNum: 10, rowList: [10, 20, 30], colNames: ['序号', 'PID编号', '类型', '楼栋', '单元', '门禁名称','操作'], colModel: [{ name: "SID", index: "SID", key: true, hidden: true }, { name: 'PID', index: 'PID', }, { name: 'TYPE', index: 'TYPE', editable: true, formatter:'select', edittype:'select', editoptions: {value:"0:单元门禁;1:公共门禁"}, },{ name: 'BUILDING', index: 'BUILDING', editable: true, formatter:'select', edittype:'select', editoptions:{value:getBudiling()}, },{ name: 'UNIT', index: 'UNIT', editable: true, formatter:'select', edittype:'select', editoptions:{value:getUnit()}, },{ name: 'NAME', index: 'NAME', editable:true, edittype:"text", },{ name: 'BU', index: 'BU', }], sortname: 'sid', rownumbers: true, jsonReader: { root: 'rows', page: "page", total: 'total', records: "records", repeatitems: false }, pager: "#jqGrid_paper", viewrecords: true, multiselect: true, hidegrid: false, //双击改变值 ondblClickRow: function(id){ //取当前行的值 var rowData = $("#jqGrid").jqGrid("getRowData", id); if(!rowData.SID){ return; } if(id && id!==lastSel){ jQuery('#jqGrid').restoreRow(lastSel); var td = $("#"+lastSel).find("td:last"); td.html(""); lastSel=id; } //将当前行edit jQuery('#jqGrid').editRow(id,true); //默认安装点名称 $("#"+id+"_NAME").attr("disabled", "true"); $("#"+id+"_UNIT").attr("disabled", "true"); setName(id); //type变化 $("#"+id+"_TYPE").change(function() { var selectType = $("#"+id+"_TYPE").val(); $("#"+id+"_BUILDING").empty(); $("#"+id+"_UNIT").empty(); //公共门禁。公共门禁不需要楼栋单元，门禁名称需要重新写 if(selectType == 1){ $("#"+id+"_BUILDING").append("<option>-</option>"); $("#"+id+"_UNIT").append("<option>-</option>"); $("#"+id+"_BUILDING").attr("disabled", "true"); $("#"+id+"_UNIT").attr("disabled", "true"); $("#"+id+"_NAME").removeAttr("disabled"); $("#"+id+"_NAME").val(""); return; } //单元门禁。单元门禁必须选择楼栋单元，门禁不需要写 $("#"+id+"_NAME").attr("disabled", "true"); $("#"+id+"_BUILDING").removeAttr("disabled"); $("#"+id+"_UNIT").removeAttr("disabled"); $.ajax( { url:"${pageContext.request.contextPath}/admin/cbuilding_list.action", type:"post", dataType:"json", error:function(){alert("请求失败!");}, success:function(data){ if(data!=null && data!=""){ var str=""; $("#"+id+"_BUILDING").append("<option value='-1'>请选择</option>"); $("#"+id+"_UNIT").append("<option value='-1'>请选择</option>"); for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].sid+"'>"+data[i].cbName+"</option>"; } $(str).appendTo($("#"+id+"_BUILDING")); } } }); }); $("#"+id+"_BUILDING").change(function() { var selectBuilding = $("#"+id+"_BUILDING").val(); $("#"+id+"_UNIT").empty(); $("#"+id+"_UNIT").removeAttr("disabled"); $.ajax( { url:"${pageContext.request.contextPath}/admin/cinstallunit_listUnit.action", type:"post", data:{ 'bsid':selectBuilding }, dataType:"json", // 接受数据格式 error:function(){alert("请求失败!");}, success:function(data){ if(data!=null && data!=""){ var str=""; $("#"+id+"_UNIT").append("<option value='-1'>请选择</option>"); for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].sid+"'>"+data[i].cbName+"</option>"; } $(str).appendTo($("#"+id+"_UNIT")); } } }); setName(id); }); $("#"+id+"_UNIT").change(function() { setName(id); }); var td = $("#"+id).find("td:last"); td.html("<input type=\"button\" style=\"padding: 2px 10px\" class=\"btn btn-success\" value=\"保存\" onclick=\"save("+rowData.SID+","+id+")\" \/>"); } });js方法：
保存：
function save(sid,id){ <span style="white-space:pre"></span>var type = $("#"+id+"_TYPE").val(); <span style="white-space:pre"></span>var name = $("#"+id+"_NAME").val(); <span style="white-space:pre"></span>if(type == 1){ <span style="white-space:pre"></span>if(!name || name ==""){ <span style="white-space:pre"></span>alert("公共门禁必须填门禁名称"); <span style="white-space:pre"></span>return; <span style="white-space:pre"></span>} <span style="white-space:pre"></span>}else{<span style="white-space:pre"></span> <span style="white-space:pre"></span>var building = $("#"+id+"_BUILDING").val();<span style="white-space:pre"></span> <span style="white-space:pre"></span>var unit = $("#"+id+"_UNIT").val(); <span style="white-space:pre"></span>if(!building || building == -1 || !unit || unit == -1){ <span style="white-space:pre"></span>alert("单元门禁必须选择楼栋"); <span style="white-space:pre"></span>return; <span style="white-space:pre"></span>} <span style="white-space:pre"></span>}// <span style="white-space:pre"></span>jQuery("#jqGrid").saveRow(id, false, 'clientArray'); <span style="white-space:pre"></span>jQuery("#jqGrid").saveRow(id, { url: "${pageContext.request.contextPath}/admin/tlocks_updateRow.action", mtype : "POST", restoreAfterError: true, extraparam: { <span style="white-space:pre"></span> "id": sid,<span style="white-space:pre"></span> "type": $("#"+id+"_TYPE").val(), <span style="white-space:pre"></span> "name": $("#"+id+"_NAME").val(), <span style="white-space:pre"></span> "building": $("#"+id+"_BUILDING").val(), <span style="white-space:pre"></span> "unit": $("#"+id+"_UNIT").val() }, successfunc: function(response){ <span style="white-space:pre"></span> response = JSON.parse(response.responseText) if (response.code == 0) { <span style="white-space:pre"></span> alert(response.msg); <span style="white-space:pre"></span> return false; <span style="white-space:pre"></span> } return true; }, errorfunc: function(rowid, res){ console.log(rowid); console.log(res); } }); <span style="white-space:pre"></span>var td = $("#"+id).find("td:last"); td.html(""); <span style="white-space:pre"></span> }<pre name="code" class="html"><pre name="code" class="html"><strong><span style="font-size:18px;">加载页面时需要查询出所有的可选择的。就双击行编辑的时候，出现下拉框，是从这里来的</span></strong>
function getBudiling() { var str="-1:请选择"; <span style="white-space:pre"></span>$.ajax( { url:"${pageContext.request.contextPath}/admin/cbuilding_list.action", type:"post", async:false, dataType:"json", // 接受数据格式 error:function(){alert("请求失败!");}, success:function(data){ if(data!=null && data!=""){ for(var i=0;i<data.length;i++){ // <span style="white-space:pre"></span> if(str != ""){// <span style="white-space:pre"></span> str+=";";// <span style="white-space:pre"></span> } <span style="white-space:pre"></span> str+=";"+data[i].sid+":"+data[i].cbName; } } } <span style="white-space:pre"></span> }); return str; } <strong><span style="font-size:18px;">加载页面时需要查询出所有的可选择的。就双击行编辑的时候，出现下拉框，是从这里来的。而且必须得全都查出来，不然保存到页面的时候，会出现页面无法保存的现象，就是因为级联查询前一个有值，后一个对应id找不到值，就显示不了</span></strong>
function getUnit() { var str="-1:请选择"; var first = "first"; <span style="white-space:pre"></span>$.ajax( { url:"${pageContext.request.contextPath}/admin/cinstallunit_listUnit.action", type:"post", data:{<span style="white-space:pre"></span> <span style="white-space:pre"></span>'bsid':first<span style="white-space:pre"></span> }, async:false, dataType:"json", // 接受数据格式 error:function(){alert("请求失败!");}, success:function(data){ if(data!=null && data!=""){ for(var i=0;i<data.length;i++){ // <span style="white-space:pre"></span> if(str != ""){// <span style="white-space:pre"></span> str+=";";// <span style="white-space:pre"></span> } <span style="white-space:pre"></span> str+=";"+data[i].sid+":"+data[i].cbName; } } } <span style="white-space:pre"></span> }); return str;//这个str格式就是“id:数据;” } function setName(id){ <span style="white-space:pre"></span>var buding = $("#"+id+"_BUILDING").find("option:selected").text(); var unit = $("#"+id+"_UNIT").find("option:selected").text() $("#"+id+"_NAME").val(buding+unit); } 1 0
- 实现jqgrid 行编辑，级联查询，并点击按钮保存
- JqGrid 学习笔记---实现在jqGrid表格上动态的加行、删行，最后点击“保存”按钮，与后台交互，保存数据
- jqgrid行内编辑，保存
- 实现jqGrid单元格编辑完后点击提交按钮一次性提交
- jqGrid 行编辑 select 3级联动 的一种实现方法
- jqgrid保存按钮，保存以后jqgrid自动刷新 追加或编辑按下后 保存取消以外的按钮非活性
- jqgrid实现行编辑功能
- JS点击编辑内容并保存
- 用jquery实现点击文字可编辑并保存修改至数据库
- DataGrid 行编辑并保存
- 动态添加行并实现每行的级联并把值保存到数据库中的实现方法
- jqgrid 实现行编辑，表单编辑的列联动
- datagrid行编辑如何实现级联？
- asp.net实现省市区级联下拉列表并保存状态
- jqgrid行编辑
- jqGrid行编辑DEMO
- jqGrid行编辑配置
- jqGrid行编辑事件
- Java获取本机ip和服务器ip
- CentOS7 配置sendmial + PHP mail函数发送邮件
- Linux MTD系统剖析~张润萌
- Linux保存修改vi指令
- java中list转数组操作
- 实现jqgrid 行编辑，级联查询，并点击按钮保存
- JMeter基础之-使用技巧
- ScalaReference路径
- Object size checking to prevent (some) buffer overflows
- U-Boot 的移植入门(2)——nand flash识别与操作
- ibatis 批处理
- hdu1025
- cisco路由器密码恢复
- Mac上更新Ruby
