Jqgrid 的简单使用

JqGrid 的简单使用显示表格

详细请看中文解析：http://blog.mn886.net/jqGrid/

标题

代码块：

HTML

<div class="jqGrid_wrapper" style="height:840">
    <div>
        <a id = "add_user" href="#modal-container-293731" role="button" class="btn"                                                data-toggle="modal"> <img src="add.png"/></a>
        <a id = "edit_user" href="#modal-container-293732" role="button" class="btn" data-toggle="modal"> <img src="edit.png"/></a>
        <a id = "del_user" role="button" class="btn" > <img src="delete.png"/></a>
        </div>
    <table id="table_list_2"></table>
    <div id="pager_list_2"></div>
                <div class="container">
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="modal fade" id="modal-container-293731" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            用户添加
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <div>
                                        <label for="male">用户名：</label>
                                        <input type="text" id="user" name="user" class="form-control uname" placeholder="请输入用户名" />
                                        </div>
                                        <div>
                                        <label for="male">密&nbsp;码：</label>
                                        <input type="password" id="password" name="password"  class="form-control pword m-b" placeholder="请输入密码" />
                                        </div>
                                        <div>
                                        <label for="male">权&nbsp;限：</label>
                                        <input type="text" id="authority" name="authority" class="form-control uname" placeholder="您的权限" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                         <button id = "button_add" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="modal fade" id="modal-container-293732" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            用户编辑
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <div style="display:none">
                                        <label for="male">ID：</label>
                                        <input type="text" id="userid" name="id" class="form-control uname" placeholder="请输入用户名" />
                                        </div>
                                        <div>
                                        <label for="male">用户名：</label>
                                        <input type="text" id="useruser" name="user" class="form-control uname" placeholder="请输入用户名" />
                                        </div>
                                        <div>
                                        <label for="male">密&nbsp;码：</label>
                                        <input type="password" id="userpassword" name="password"  class="form-control pword m-b" placeholder="请输入密码" />
                                        </div>
                                        <div>
                                        <label for="male">权&nbsp;限：</label>
                                        <input type="text" id="userauthority" name="authority" class="form-control uname" placeholder="您的权限" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                         <button  id = "button_edit" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
        </div>
    </div>

JS代码

$(document).ready(function(){$.jgrid.defaults.styleUI="Bootstrap";
            $.ajax({
                url : "",
                contentType : "application/json; charset=utf-8",
                type : "get",
                async : true ,
                dataType : "json",
                success : function (date) {
                    //我是将后台传递过来的值重新赋给变量，然后用
                    var id = date.id;
                    var user = date.user;
                    var password = date.password;
                    var authority = date.authority;
                    var creattime = date.creattime;
                    var updatetime = date.updatetime;
                    $("#table_list_2").jqGrid(
                     //data引用数据，    datatype服务器返回数据类型{data:date,datatype:"local",height:450,autowidth:true,shrinkToFit:true,rowNum:20,rowList:[10,20,30],
                    colNames:["序号","用户名","密码","权限","创建时间","修改时间"],
                    colModel:[{name:"id",index:id,editable:true,width:60,search:true},
                    {name:"user",index:user,editable:true,width:90},
                    {name:"password",index:password,editable:true,width:100},
                    {name:"authority",index:authority,editable:true,width:80},
                    {name:"creattime",index:creattime,editable:true,width:80},
                    {name:"updatetime",index:updatetime,editable:true,width:80}],
                    //pager ,配置翻页导航  viewrecords,定义是否要显示总记录数 sortname ,默认的排序列
                    pager:"#pager_list_2",viewrecords:true,sortname : 'id',viewrecords : true,sortorder : "desc",multiselect : true,
                    //这里是是否使用自带的添加，编辑，修改，但是这里编辑页面有bug，如果没有bug的话，那就很好了，可以直接使用，我这里是自己写了一个添加，删除修改，只用了他的分页技术caption:"",add:true,edit:false,addtext:"Add",edittext:"Edit",hidegrid:false});
                    //$("#table_list_2").setSelection(4,true);
                    $("#table_list_2").jqGrid("navGrid","#pager_list_2",{edit:false,add:false,del:false,search:true},{height:200,reloadAfterSubmit:true});
                    $(window).bind("resize",function(){var width=$(".jqGrid_wrapper").width();
                    $("#table_list_2").setGridWidth(width)});
                }

            });