在浏览导航栏添加所需按钮
<!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学习笔记整理--进阶篇(二),正式进入后台设计阶段