jqGrid增删改查显示——联动下拉框+nodejs后台
来源：互联网 发布：淘宝卖家助手要钱吗? 编辑：程序博客网 时间：2024/05/16 23:37
本篇文章只介绍jqGrid的联动操作，希望能帮到大家~！有不正确的请指出！谢谢！
相关博文：
①jqGrid增删改查显示——显示+nodejs后台：http://blog.csdn.net/tangjiarao/article/details/50454695
在第一篇文章中介绍了jqGrid结合nodejs显示数据，本篇文章在在上篇文章的基础上进行修改。
效果演示：
①增加操作：
②修改操作
可以看到当学校改变的时候，对应的班级都会改变。
实现逻辑：
（1）从后台获取学校的data并且将数据作为下拉框的option
（2）当学校改变时，刷新对应学校的班级
上一篇文章完整核心代码：
$.ajax({//先用ajax与后台交互获取要显示的数据 url: "/userFindAction",//与后台交互的url type: "GET",//ajax提交方式 dataType: "json",//从服务器端返回的数据类型 success: function (data) { //data是从服务器返回的json对象，其中result是我要显示的数据内容 window.datas = data.result; //设置content-pager高度 $(".content-pager").height($(window).height() - 400); //数据成功拿到后就渲染jqgrid // 配置jqGrid的属性 jQuery("#jqGrid01").jqGrid({ data: datas,//从服务器拿来的数据 datatype: "local",//显示数据的方式，因为通过ajax拿到数据了，所以是本地的 jsonReader: {//描述json 数据格式的数组 repeatitems: false// 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。 }, height: $('.content-pager').height(), // Auto height step 2, rowNum: 10,//在grid上初始显示记录条数 rowList: [10, 20, 30],//一个下拉选择框，用来改变显示记录数 colNames: ['userId', 'userName', 'accountName', 'accountPassword', 'roleType', 'schoolName', 'schoolClassName', 'active',''],//列显示名称，是一个数组对象 colModel: [//配置显示的列属性 /** * 对应后台返回数据datas中的userId * hidden:控制该列不显示 */ {name: 'userId', index: 'userId', width: 60,hidden:true}, /** * 对应后台返回数据datas中的userName * editable：定义字段是否可编辑 */ { name: 'userName', index: 'userName', width: 100, editable: true, editoptions: {size: "20", maxlength: "30"}//当执行修改和新增的操作时，会显示输入框，输入框的配置 }, /** * 对应后台返回数据datas中的accountName * editable：定义字段是否可编辑 */ { name: 'accountName', index: 'accountName', width: 100, editable: true, editoptions: {size: "20", maxlength: "30"} }, /** * 对应后台返回数据datas中的accountPassword * search：定义此列是否可以作为搜索列 * 注：由于不想让用户看到密码，所以将改列的内容改为一个重置按钮，点击可以修改密码 */ { name: 'accountPassword', index: 'accountPassword', width: 120, search:false }, /** * 对应后台返回数据datas中的roleType * editrules：设置编辑字段的控件的规则 * edittype：控件该字段在修改或者新增时类型 select为下拉菜单 */ { name: 'roleType', index: 'roleType', width: 80, editable: true, editrules: true, edittype: "select", }, /** * 对应后台返回数据datas中的schoolName */ { name: 'schoolName', index: 'schoolName', width: 150, editable: true, editrules: true, edittype: "select", }, /** * 对应后台返回数据datas中的schoolClassName * value：在修改或者新增时下拉框显示的数据 */ { name: 'schoolClassName', index: 'schoolClassName', width: 150, editable: true, edittype: "select", editoptions: {value: {'请选择班级': '请选择班级'}} }, /** * 该字段是在前端自定义的字段 * sortable：设置该字段是否进行排序 */ { name: 'active', index: 'active', width: 60,sortable : false }, /** * 改列显示编辑、保存、重置按钮，在编辑操作会用到 */ { name : 'act',index : 'act',width : 75,sortable : false,search:false }, ], pager: "#jqGridPager01",//定义翻页用的导航栏，必须是有效的html元素(即定义的div块)。 viewrecords: true,//定义是否要显示总记录数 caption: "User Management",//表格名称 hidegrid: false,//启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效 multiselect: true,//定义是否可以多选 altRows: true, rownumbers: true,//如果为ture则会在表格左边新增一列，显示行顺序号 /** * 当从服务器返回响应时执行的方法 * ----我的理解是加载表格完成后执行的方法---- */ loadComplete: function () { //设置Reset按钮 setReset(); //设置最后一列的修改按钮 setEdit(); }, }); // 配置导航条属性 jQuery("#jqGrid01").navGrid('#jqGridPager01', { //设置为false需要自己重新重新该方法 edit: false, add: false, del: false, search: true },{},{},{},{multipleSearch:true}) /** * 增加自定义按钮——add按钮 * 参数1：导航条div名称 * 参数2：按钮名称，可以为空 * 参数3：按钮的图标，string类型，必须为jquery UI theme图标 * onClickButton：点击该按钮时候的操作 */ .navButtonAdd('#jqGridPager01', { caption: "", buttonicon: "ui-icon-circle-plus", onClickButton: function () { //增加一行操作 addRows(); }, position: "first"//first或者last，按钮位置 }) .navButtonAdd('#jqGridPager01', { caption: "", buttonicon: "ui-icon-trash", onClickButton: function () { //删除一行操作 removeRows(); }, position: "first" }) //分隔符 .navSeparatorAdd("#jqGridPager01", {sepclass: "ui-separator", sepcontent: ''}); $("#jqGrid01").jqGrid('setGridWidth', $(".content-pager").width(), true); }, error: function () { } } ); });（1）从后台获取学校的data
当table加载完之后就与后台服务器进行交互，所以在loadComplete方法中调用getSchool();
loadComplete: function () { //获取学校data getSchool(); //设置Reset按钮 setReset(); //设置最后一列的修改按钮 setEdit();},getSchool()方法/** * get School List */ function getSchool(){ $.ajax({//用ajax与后台交互 url: '/schoolFindExistFindAction',//后台请求url async: false, success: function (data) { if (data.success == 1) {//如果返回成功 window.schoolResult = data.result;//拿出学校data var schoolName = "请选择学校:请选择学校;"; //将数据里面的schoolName逐个取出，并且以”xxxx:xxxx“设置为select的option值，连接成String对象 for (var i = 0; i < schoolResult.length; i++) { if(i!=schoolResult.length-1){ schoolName+=schoolResult[i].schoolName+":"+schoolResult[i].schoolName+";"; }else{ schoolName+=schoolResult[i].schoolName+":"+schoolResult[i].schoolName; } } //alert(JSON.stringify(schoolName)); /** * 设置新的属性，动态改变列属性 * schoolName：是点击add按钮后，弹出表单（即上图）中schoolName字段的id值，其是按照你定义的列名产生的。 * * 调用该方法后，school的下拉菜单就会有学校名称 */ $('#jqGrid01').setColProp('schoolName', {editoptions: {value: schoolName}}); } } }); }node.jsrouter.get('/schoolFindExistFindAction',schoolManagermentController.schoolFindExistFindAction());schoolManagermentController/** * get school List where the school have at least one schoolClass * @returns {Function} */exports.schoolFindExistFindAction = function() { return function(req, res) { schoolClassDao.distinctSchoolClass('schoolId',{},dbHelper,function(result){ if(result.success==1){ var conditions ={_id:{"$in": result.result}}; schoolDao.findSchool(conditions,dbHelper,function(result){ if(result.success==1){ var schoolGroup=result.result; var schoolGroupNew =new Array(); for(var i=0;i<schoolGroup.length;i++){ schoolGroupNew.push({ id:i+1, schoolId:schoolGroup[i]._id, schoolName:schoolGroup[i].schoolName }); } res.json({success:1,flag:"find School exist success",result:schoolGroupNew}); } }); } }); }}其中后台代码不解释了，因为都是我的逻辑，大家按照自己的逻辑去写，用res.json返回数据（2）当学校改变时，刷新对应学校的班级由于当学校改变的时候，需要有以下动作：1.向服务器提交选中的school2.服务器通过school查找对应班级并且返回3.schoolClass下拉框的option重新刷新所以要给school增加改变时的触发方法<span style="white-space:pre"></span>/** * 对应后台返回数据datas中的schoolName */ { name: 'schoolName', index: 'schoolName', width: 150, editable: true, editrules: true, edittype: "select", editoptions: { dataEvents: [//给当前控件追加事件处理 { type: 'change', //下拉选择的时候 fn: function (e) { //触发方法 //获取当前下拉框的id名字（这是点击编辑按钮时才需要的，因为点击编辑按钮后，schoolName的下拉框会变成1_schoolName,其中”1“是行号） var itemName = this.id; var selectNum = itemName.match(/^\d+/);//（这是点击编辑按钮时才需要的）将id中的数字获取出来 var schoolName =this.value; //获取选中的学校名称 getSchoolClass(selectNum,schoolName); //调用获取班级data的方法 } } ] } },getSchoolClass(selectNum,schoolName);方法/** * 获取班级列表 */ function getSchoolClass(selectNum, schoolName) { var str = ""; //用来存放option值 //将增加操作的弹出菜单中的schoolClassName的下拉框内容清空（因为每次切换内容都需要变更） $("select#schoolClassName").empty(); //将修改操作中的1_schoolClassName（1是行号）的下拉框内容清空（因为每次切换内容都需要变更） $("select#" + selectNum + "_schoolClassName").empty(); if (schoolName == '请选择学校') { str += "<option>" + "请选择班级" + "</option>"; } else { var schoolId; for (var i = 0; i < schoolResult.length; i++) { //通过与本地学校data的匹对，获取学校的id if (schoolName.toString() == schoolResult[i].schoolName) { schoolId = schoolResult[i].schoolId; //与后台进行操作 $.ajax({ url: '/schoolClassFindAction', async: false, cache: false, dataType: "json", data: { schoolId: schoolId, //传入学校id，到后台获取json schoolClassName: "" }, success: function (result) { // alert(JSON.stringify(result)); if (result.success == 1) { var schoolClass = result.result; //取出班级data for (var i = 0; i < schoolClass.length; i++) { //循环生成option，并且连接成String对象 str += "<option schoolid='" + schoolClass[i].schoolClassId + "' value='" + schoolClass[i].schoolClassName + "'>" + schoolClass[i].schoolClassName + "</option>"; //alert(str); } } else { str += "<option>" + "暂无班级" + "</option>"; } } }); break; } } } //获取下面下拉框schoolClassName对象 var schoolClassName = $("select#schoolClassName"); schoolClassName.append(str);//渲染option //获取下面下拉框selectNum_schoolClassName对象 var schoolClassName2 = $("select#" + selectNum + "_schoolClassName"); schoolClassName2.append(str);//渲染option }
再次说明：
弹出菜单的下拉联动，shcoolName后的下拉框id是schoolName，其是jqgrid调用增加操作方法时按照列名产生的，所以在联动操作时对该列进行改变进行监听，并且改变schoolClassName的option值。增加操作：
列编辑的下拉联动，schoolName的下拉框id是1_schoolName,2_schoolName……等，数字是行id，所以对某行操作时需要用正则表达式将id中数字取出，再对对应的下拉框进行操作。修改操作：
相关文章：
http://blog.csdn.net/tangjiarao/article/details/50460146 增加
http://blog.csdn.net/tangjiarao/article/details/50460780 修改
http://blog.csdn.net/tangjiarao/article/details/50461122 删除
http://blog.csdn.net/tangjiarao/article/details/50461998 查找
参考文章：
http://www.cnblogs.com/sikaodelang/articles/2513299.html
http://jingyan.baidu.com/article/08b6a591ce02f214a809220d.html
0 0
- jqGrid增删改查显示——联动下拉框+nodejs后台
- jqGrid增删改查显示——显示+nodejs后台
- jqGrid增删改查显示——增加+nodejs后台
- jqGrid增删改查显示——修改+nodejs后台
- jqGrid增删改查显示——删除+nodejs后台
- jqGrid增删改查显示——查找
- jqgrid增删改查
- Jqgrid 增删改查
- jqgrid的增删改查
- nodejs+easyui(抽奖活动后台)增删改查
- 增删改查省级联动
- Java学习札记——后台增删改查
- NODEJS mongoose 增删改查
- jqGrid用法及增删改查方法
- MySQL—增删改查
- MongoDB—增删查改
- String—增删查改
- nodejs对mongodb的增删改查
- APK动态加载框架（DL）解析
- 浅谈MySQL主键
- PB
- 蓝桥杯 算法训练 装箱问题 （DP）
- 如何将右键新建文本文档默认编码设为UTF-8格式
- jqGrid增删改查显示——联动下拉框+nodejs后台
- Build.VERSION.SDK_INT
- 获得ListView、GriedView item项绑定的数据
- 使用ROracle从Oracle数据库获取数据框
- 研究Android事件分发笔记
- 日积月累--exception记录
- Tomcat服务器热启动，解决部署源码时每次手动重启Tomcat问题
- https原理：证书传递、验证和数据加密、解密过程解析
- android学习第一发
