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">密 碼：</label>
<input type="password" id="password" name="password" class="form-control pword m-b" placeholder="請輸入密碼" />
</div>
<div>
<label for="male">權 限：</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">密 碼：</label>
<input type="password" id="userpassword" name="password" class="form-control pword m-b" placeholder="請輸入密碼" />
</div>
<div>
<label for="male">權 限：</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)});
}
});