jqGrid增删改查显示——增加+nodejs后台
来源：互联网 发布：win7安装数据库没反应 编辑：程序博客网 时间：2024/06/06 11:45
本篇文章只介绍jqGrid增加操作，希望能帮到大家~！有不正确的请指出！谢谢！
本篇文章代码在以下两篇代码基础上修改：
jqGrid显示：http://blog.csdn.net/tangjiarao/article/details/50454695
jqGrid联动下拉框：http://blog.csdn.net/tangjiarao/article/details/50456160
演示效果：
点击导航条上的“+”按钮弹出增加菜单，选择和输入相关内容，点击submit即可保存到后台数据库。
以上两篇文章完整核心代码：
$(document).ready(function () { $.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", editoptions: { dataEvents: [//给当前控件追加事件处理 { type: 'change', //下拉选择的时候 fn: function (e) { //触发方法 //获取当前下拉框的id名字（这是点击编辑按钮时才需要的，因为点击编辑按钮后，schoolName的下拉框会变成1_schoolName,其中”1“是行号） var itemName = this.id; var selectNum = itemName.match(/^\d+/);//（这是点击编辑按钮时才需要的）将id中的数字获取出来，编辑时就会对id为selectNum的行进行操作 var schoolName =this.value; //获取选中的学校名称 getSchoolClass(selectNum,schoolName); //调用获取班级data的方法 } } ] } }, /** * 对应后台返回数据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 () { //获取学校data getSchool(); //设置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 () { } } ); });从其中代码可以看出，执行的addRows()方法就是要跟后台交互的增加一行的方法：
.navButtonAdd('#jqGridPager01', {<span style="white-space:pre"></span>caption: "", buttonicon: "ui-icon-circle-plus", onClickButton: function () { //增加一行操作 addRows(); },})结合演示图片和代码，可以看到有以下几个字段及其属性：1.userName(输入框：editable：true)
2.accountName(输入框：editable：true)
3.roleType(下拉框：editable：true,edittype：select)
4.schoolName(下拉框：editable：true,edittype：select)
5.schoolClassName(下拉框：editable：true,edittype：select)
所以在执行addRows()方法前需要获取roleType、schoolName、schoolClassName作为option的数据。schoolName，schoolClassName已经在联动文章中介绍过。
获取roleType：
<span style="white-space:pre"></span> /** * 当从服务器返回响应时执行的方法 * ----我的理解是加载表格完成后执行的方法---- */ loadComplete: function () { //获取学校data getSchool(); //获取roleType getRole(); //设置Reset按钮 setReset(); //设置最后一列的修改按钮 setEdit(); },getRole();方法/** * get role List */ function getRole(){ $.ajax({ url: '/roleFindAction',//请求路径 async: false, success: function (data) { if (data.success == 1) { window.roleResult = data.result; var roleTypes ="请选择权限:请选择权限;"; for (var i = 0; i < roleResult.length; i++) { if(i!=roleResult.length-1){ roleTypes+=roleResult[i].roleType+":"+roleResult[i].roleType+";"; }else{ roleTypes+=roleResult[i].roleType+":"+roleResult[i].roleType; } } //alert(roleTypes); $('#jqGrid01').setColProp('roleType', {editoptions: {value: roleTypes}}); } } }); }增加一行方法：addRows();
function addRows(){ /** * 由于点击增加按钮时，弹出菜单中的---被联动下拉框schoolClassName--- * 不会自动清空上次选择的数据，所以要在此手动清空 */ $("select#schoolClassName").empty();//清空选择项 var str = "<option>" + "请选择班级" + "</option>";//加入默认项 var schoolClassName = $("select#schoolClassName");//获取下拉框对象 schoolClassName.append(str);//渲染option //使用jqGrid的方法new，新增一行 jQuery("#jqGrid01").jqGrid('editGridRow', "new", { url: '/registerAction',//与后台交互url height: 300, mtype: "POST", reloadAfterSubmit: false,//操作完成后,是否重新加载网页 closeAfterAdd: true,//添加模式时,添加记录后是否关闭对话框 /** * 点击submit时的操作 * 1.获取表单5个字段的内容 * 2.post数据到后台服务器 * @param params * @param postdata 被提交的数据 * @returns {{userGroup: Array}} */ onclickSubmit: function (params, postdata) { //获取下拉框roleType选中的值 var roleTypeName=$.trim($("#editmodjqGrid01").find("#roleType").val()) for(var i=0;i<roleResult.length;i++){ if(roleTypeName==roleResult[i].roleType){ var userGroup = new Array(); //组装数据 userGroup.push({ userName: $.trim($("#editmodjqGrid01").find("#userName").val()), accountName: $.trim($("#editmodjqGrid01").find("#accountName").val()), accountPassword: '12345', roleType: roleResult[i]._id, schoolClassName: $.trim($("#schoolClassName").find("option:selected").attr('schoolid')) }); break; } } //return就可以将要上传的数据post到后台 return {userGroup:userGroup}; }, /** * 在submit之后的操作 * 1.接收服务器返回的数据 * 2.判断是否保存成功 * @param response 后台返回的数据，可以输出看看 * @param postdata * @returns {*[]} */ afterSubmit : function(response, postdata) { var result=response.responseJSON;//responseJSON就是我们后台返回的json if(result.success==1){ switch (result.code){//判断是否成功 case 0: return [false,"用户名已经存在！"]//return false的话对话框不会消失，并且弹出错误 break; case 2: return [false,"保存部分用户成功,其余用户名已存在！"] break; case 1: window.wxc.xcConfirm("保存用户成功", window.wxc.xcConfirm.typeEnum.info); return [true,""]//return true 对话框会消失 break; } } else{ return [false,"创建用户失败！"] } } }); }index.js
router.post('/registerAction',registerAction.registerAction());registerAction.jsexports.registerAction = function() { return function(req, res) { //获取从前端传来的数据 var data = req.param('userGroup'); var userGroup; if(Object.prototype.toString.call(data) == "[object String]"){ userGroup=JSON.parse(data); }else{ userGroup=data; } console.log(userGroup); //对数据进行操作 ... //返回数据 res.json({success:1,code:1,flag:"save school success --"}); ... }}关于我保存用户的逻辑方法我没有贴出来，主要过程如上。roleType与后台交互的过程跟上面大致一样。
相关文章：
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.w3dev.cn/article/20130703/jqGrid-form-editing-config.aspx
https://github.com/jiangyuan/blog/blob/a971c118e465ab2ce3a3b43034cd60f1f710ffa3/note/docOfjqGrid/%E7%BC%96%E8%BE%91%E4%B9%8B%E5%9B%9B%20%E8%A1%A8%E5%8D%95%E7%BC%96%E8%BE%91.md
http://blog.csdn.net/zgjsczwj/article/category/1193882 blog
http://blog.mn886.net/jqGrid/ api
1 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的增删改查
- nodejs+mongoose简单关联+增删改查
- JSON.stringify()，eval(),JSON.parse()
- 天声人語 20160105 「申」という字の来歴
- 关系型数据库管理系统简介
- spark源码阅读1
- Android.mk详解
- jqGrid增删改查显示——增加+nodejs后台
- Instancetype与id的区别和联系
- Ngui 五种点击事件实现方式及在3d场景点透事件
- 大一用C#编写的斗地主程序
- TDW(Tencent Data Warehouse)之hive简介
- 用一个textView实现不同颜色且多行的文本
- 点击app图标和从任务列表打开activity不一样问题
- 日志框架和日志系统
- Failed to instantiate the default view controller for UIMainStoryboardFile
