在瀏覽導航欄添加所需按鈕
<! doctype html> <html> <head> <meta charset =“ utf-8”/> <title> demo </title> <link rel =“ stylesheet” type =“ text/css” href =“ css/jquery-ui.min.min.min.min.min.css” href =“ css/jquery-ui.theme.min.css”/> <link rel =“ stylesheet” type =“ text/css” text/css“ href =” css/ui.jqgrid-bootstrap-ui.css s.css“/> /></head><body><div id="main"><!--jqGrid所在--><table id="grid-table"></table><!--jqGrid 瀏覽導航欄所在--><div id="grid-pager"></div></div><script src="js/jquery-1.11.0.min.js" type="text/javascript" charset =“ utf-8”> </script> <腳本src =“ js/i18n/grid.locale cn.js” type =“ text/javascript” charset“ charset” type =“ text/javaScript”> //當dataType為“本地”時需填寫var var grid_data = [{id:“ 00001”,type:“ type:“ tay:”退貨出庫”,付費:“ 1000”,name:“ abc”,text:“ ccc”},ccc“ ccc”},{id:00002“ 00002”,00002“ 00002”,type:“ type:“ text:” a abc:a a a a a a: {id:“ 00003”,類型:“退貨出庫”,付費:“ 1040.06”,name:“ abc”,text:“ ddd”}]; var grid_selector =“#grid-table”; var pager_selector =“ var pager_selector =“#grid-pager”#grid-pager“ //當數據類型為“本地”時需填寫datatype:“ local”,//數據來源,本地數據( local,json,jsonp,xml等)高度:150,//高度,表格高度。可為數值、百分比或'auto'// mtype:“ get” [{name:'id',index:'id',//索引。其和後台交互的參數為sidxkey:true,// //當從服務器端返回的數據中沒有id時,將此作為唯一rodId使用只有一個列可以做這項設置。如果設置多於一個,那麼只選取第一個,那麼只選取第一個,width:100,width:100,editable:false,editoptions:{size:size:size:“ 20”,maxlength,maxlength:maxlength:30“ 30”}}}},name: //是否可編輯edittype: "select", //可以編輯的類型。可選值:text, textarea, select, checkbox, password, button, image and file.seditoptions: {value: "1:採購入庫;2:退用入庫"}}, {name: 'pay',index: 'pay',width: 60,sorttype: "double",editable: true}, {name: 'name',index: 'name',width: 150,可編輯:正確,編輯:{size:“ 20”,maxLength:“ 30”}},{name:'text',索引:'text',wetth:250,width:250,sortable:sortable:false,false,false,true,drime,drime,edittype:textarea“,textarea”,editoptions:editoptions:editoptions:edition:{rows:{rows {rows {rows:cols:“ 2”,cols:“ cols:“ cols:” 10“ 10”}}}} 10,//每頁顯示記錄數列列表:[10,20,30],//用於改變顯示行數的下拉列錶框的元素數組。pager:pager_selector,// 分頁、按鈕所在的瀏覽導航欄浮雕:true,//默認為false // toppager:true,// true,//是否在上面顯示瀏覽導航欄multiSelect:true,///////////////////////////////////// // ctrlkey:“ ctrlkey”,/ctrlkey“ ctrlkey”,/ctrl ctrl ctrlib croxlib:true:croxly:true:croxny:true:croxly:croxny:true:croxly:coxlim/按鍵多選// sortName:'id',//默認的排序列名// sortorder:'asc',// 默認的排序方式( asc升序,desc降序)字幕:“採購退貨單列表”,// //表名autoWidth:true ////////////////////// //瀏覽導航欄添加功能部分代碼$(grid_selector).navgrid (只有(true)(true)編輯:true,// // 修改(只有可編輯為true時才能顯示屬性)del:true,//刪除refresh:true //刷新},{},//編輯選項{},//添加選項{},///////////////////////// delete options {multeplesearch:true} // search options;效果如下:
id的可編輯為false
下面是具體的檢索選項
首先是/任意/或/或
然後一般檢索的包含選項有
本例中把付費的sorttype設置成了“ double”類型類型(型也是一樣,不過顯示時會省略小數,請注意)
檢索是唯一能在不連接後台時使用成功的功能檢索是唯一能在不連接後台時使用成功的功能url
以上所述是jqgrid學習筆記整理---進階篇(一)。下篇jqgrid學習筆記整理--進階篇(二),正式進入後台設計階段