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)});                }            });