jqGrid增删改查显示——显示+nodejs后台

这几天开始总结一下最近研究的一个插件——jqGrid，都是些非常入门的点，希望能帮到有需要的人吧~

PS：博主的方法不是唯一的，也不完全正确，有不对的地方希望能指出来！！！我只是把我知道的介绍给大家。

（1）引入jqGrid插件的js文件

这里就不详细说了，值得注意的是：

从3.5版本开始，jqGrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme。当然，你也可以编辑自己的theme。

jqGrid也并不需要把所有的css文件都引入进来，只需导入核心css文件“ui.theme.css ” 以及“ui.core.css”即可，文件位于目录development-bundle/themes下。

但是jquery UI的主题也非常难看，有能力的同志就自己写css吧。

（2）在div块中引入插件

1.html

<div class="content-pager">    <table id="jqGrid01"></table>    <div id="jqGridPager01"></div>  </div>

2.jade

.content-pager    table#jqGrid01    #jqGridPager01

jqGrid01：显示数据的表格，对应下图的表格

jqGridPager01：表格下面的导航条，对应下图最下面一行的导航条

介绍该表格内容

①该表格是显示学生和老师的资料

userName:用户真实名字

accountName：用户登录名字

accountPassword：用户登录密码

roleType：权限

schoolName：学校名称

schoolClassName：班级名称

②ReSet：覆盖从服务器获取的密码，并且点击能修改后台服务器的密码

③最后一列按钮依次为：编辑该列，保存改列，重置

④导航条按钮依次为：删除，增加，查找，刷新（其余都是该插件本身自带）

（3）通过ajax获取后台数据

ajax：

<span style="font-size:10px;"><script>$(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);//（4）.配置jqGrid的属性并且渲染//（5）.配置导航条的属性    },                    error: function () {                    }                }        );    });</script></span>

nodejs：

①index.js

router.get('/userFindAction',userManagementController.userFindAction());

②userManagementController

exports.userFindAction = function() {    return function(req, res) {                //查找user操作...        res.json({success:1,flag:'find user List success',result:users});    }}

查找操作逻辑就不贴出来了，各位按照自己逻辑来写就可以了

从服务器返回的data：

[ { id: 1,    userId: 566a7e6e6425f95c114d3a40,    userName: '8888',    accountName: '6666',    accountPassword: '12345',    schoolClassName: '大一软件',    schoolName: '北京师范大学珠海分校',    roleType: 'Teacher' },  { id: 2,    userId: 56821bed1d8474c8902dd74a,    userName: 'jiang',    accountName: 'jiang',    accountPassword: '12345',    schoolClassName: '大一软件',    schoolName: '北京师范大学珠海分校',    roleType: 'Teacher' },  { id: 3,    userId: 56821c231d8474c8902dd74d,    userName: 'xue',    accountName: 'xue',    accountPassword: '12345',    schoolClassName: '大一软件',    schoolName: '北京理工大学珠海分校',    roleType: 'Teacher' },  { id: 4,    userId: 56821c551d8474c8902dd750,    userName: 'student1',    accountName: 'student1',    accountPassword: '12345',    schoolClassName: '大一软件',    schoolName: '北京师范大学珠海分校',    roleType: 'Student' },  { id: 5,    userId: 56821c671d8474c8902dd753,    userName: 'student2',    accountName: 'student2',    accountPassword: '12345',    schoolClassName: '大一软件',    schoolName: '北京理工大学珠海分校',    roleType: 'Student' },  { id: 6,    userId: 5682439d8c481d2468558ba1,    userName: '11',    accountName: '11',    accountPassword: '00000',    schoolClassName: '大三软件一班',    schoolName: '北京理工大学珠海分校',    roleType: 'Teacher' } ]

PS：最好设定一下id这个字段，避免行id冲突。

原因：http://blog.csdn.net/tangjiarao/article/details/50461445

（4）通过js配置jqGrid table的属性并渲染

//数据成功拿到后就渲染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();                            },                        });

①方法setReset();

/**     * set reset Button     */    function setReset(){        var ids = jQuery("#jqGrid01").jqGrid('getDataIDs');//返回当前grid里所有数据的id        for (var i = 0; i < ids.length; i++) {            var id = ids[i];            var rowData = $("#jqGrid01").getRowData(id);            var reSetBtn = "<a href='#' style='color:#f60' onclick='return resetAction("+id+")' >ReSet</a>";//将要新增的html代码转为对象，resetAction(id)是重置密码的逻辑实现方法，参数是行id            jQuery("#jqGrid01").jqGrid('setRowData', ids[i], {accountPassword: reSetBtn});//setRowData方法更新行的值，ids[i]为行id，参数3：要更新的列        }    }

resetAction(id);

function resetAction(id) {                 $.ajax({              url: '/resetPass',              async: false,              cache: false,              dataType: "json",              data: {                 id: datas[id-1].userId,  //由于id是从1开始的，所以id-1找到本地数据中对应的那条数据，并将userid传给服务器              },              success: function (result) {                 // alert(JSON.stringify(result));                 if (result.success == 1) {                    alert("重置密码成功");                 }                 else {     alert("重置密码失败");                               }         }      });}

后台逻辑不贴出来，主要给大家介绍前端跟后台怎么交互。

②方法setEdit();

/**     * set edit Button     */    function setEdit(){        var ids = jQuery("#jqGrid01").jqGrid('getDataIDs');//返回当前grid里所有数据的id                for ( var i = 0; i < ids.length; i++) {            var cl = ids[i];            var be = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' onclick=\"editRows("+cl+")\"> " +//调用编辑方法，修改操作用到                    "<span class = 'glyphicon glyphicon-edit' aria-hidden = 'true' ></span></button>";//设置icon            var se = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' onclick=\"saveRows("+cl+")\" > " +//调用保存方法，修改操作用到                    "<span class = 'glyphicon glyphicon-ok' aria-hidden = 'true' ></span></button>";//设置icon            var ce = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' onclick=\"jQuery('#jqGrid01').restoreRow('" + cl + "');\" > " +//调用重置方法，修改操作用到                    "<span class = 'glyphicon glyphicon-remove' aria-hidden = 'true' ></span></button>";//设置icon            jQuery("#jqGrid01").jqGrid('setRowData', ids[i],                    {                        act : be + se + ce                    });        }    }

（5）通过js配置导航条属性并渲染

// 配置导航条属性                        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: ''});

相关文章：

http://blog.csdn.net/tangjiarao/article/details/50456160  联动下拉
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.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

blog：http://blog.csdn.net/zgjsczwj/article/category/1193882

UI库：http://jqueryui.com/themeroller/ 

api：http://blog.mn886.net/jqGrid/

http://www.cnblogs.com/lipan/archive/2010/11/25/1887160.html