jqGrid之效果源码
来源:互联网 发布:数控编程的方法有哪些 编辑:程序博客网 时间:2024/05/16 12:35
$(function() { $("#jqGrid").jqGrid({ url: '${path}/sys/listBnkdataAjax',// url mtype: "POST", //后台传参数 datatype: "json", //接收的参数 page: 1, //设置初始的页码 edit:true, //是否可以编辑 colMenu : true, // editable:true, ////url:'server.php?q=2&nd='+new Date().getTime(), // rownumbers:true, //edittype:"checkbox",editoptions:{value:"Yes:No",defaultValue:"Yes"}\ //edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"} //edittype:"textarea", editoptions:{rows:"2",cols:"20"} colModel: [ // { label : "主键",//sorttype: 'integer',name: 'fid', key: true, colMenu : true,editable:true, //是否可以编辑 edittype:"text",//'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默认值是text。height:100,editoptions:{ //编辑条件readonly:true, //只读size:10s //输入框大小},width: 95,searchoptions : {searchOperMenu : false,sopt : ['eq','gt','lt','ge','le']}}, {label: "状态", name: 'fstate', editable:true, edittype:"text", width: 120 }, {label : "客户", name: 'fcustid', editable:true, edittype:"text", width: 150 }, {label : "负责人", name: 'fuid', editable:true, edittype:"text", width: 150 }, {label : "负责人名称", name: 'funame', editable:true, edittype:"text", width: 150 }, {label : "记录时间", name: 'ftime', editable:true, edittype:"text", width: 180 }, {label : "上传时间", name: 'fuptime', width: 180, editable:true, edittype:"text", sorttype:'date',formatter: 'date',srcformat: 'Y-m-d',newformat: 'n/j/Y',formatoptions:{srcformat: 'Y-m-d H:i:s',newformat: 'Y-m-d H:i:s'},editrules:{required:true}, //编辑时 此值为必须填写的 }, {label : "记录值1", name: 'fval1', editable:true, edittype:"text", width: 80 }, {label : "记录值2", name: 'fval2', editable:true, edittype:"text", width: 80 }, {label : "记录单位", name: 'funit', editable:true, edittype:"text", width: 80 }, {label : "记录值3", name: 'fval3', editable:true, edittype:"text", width: 80 } ], loadonce: true, //只从服务器获取一次数据,其余的操作都在客户端执行,翻页功能会被禁用viewrecords: true, width: 1600, height: 600, rowNum: 10, // 初始化 10条 每页 rowList:[10,20,30,50],// 每页条数 可以分为多少条 shrinkToFit : false, jsonReader:{ // 分析后台数据 root:"rows", // 数据 total:"total", // 总共多少页 page:"page", // 当前页 records:"records", // 总共多少条数据 repeatitems:false // 指明每行的数据是可以重复的,如果设为false,则会从返回的数据中按名字来搜索元素。 }, pager: "#jqGridPager" //指定分页栏对象,必须为一个有效的html元素推荐使用“#pager”pginput:true //是否显示跳转页面的输入框pgtext:"" //当前页信息postData:array //此数组内容直接赋值到url上,recordpos:left //定义了记录信息的位置rowNumbers:true //如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增 此列名为rnscrollrows:true //为true时让所选择的行可见sortable:true // 是否可排序sortorder:asc desc //排序顺序viewrecords:true //是否要显示总记录数width: //如果设置则按此设置为主,如果没有设置则按colModel中定义的宽度设置colNames: //列名称显示colModel: //对显示列属性的设置{name:index:传到服务器端用来排序用的列名称width align sortable}formatoptions:初始化参数 number, date:srcformate:对输入数值进行格式化,newformat:对输出进行格式化 //email //link :target如果设置此值就会添加一个超链接 //checkbox //select datefmt:对日期进行格式化 /,-, . 都是有效的日期分隔符。y,Y,yyyy年m,mm,dd日 默认值Y-m-d edtioptions:array 对列进行编辑时设置的一些属性caption: // 表格名称//有时,我们想改变参数的默认值,且希望这种改变能够同时运用于多个表格。此时,我们可以使用 jQuery 的 extend 函数实现。 //在某些情况下,我们需要从服务器端返回一些参数但并不想直接把他们显示到表格中,而是想在别的地方显示,那么我们就需要用到userdata标签。 //jQuery("grid_id").getUserDataItem( key ) alerttext:请选择一行记录postition:定义按钮位置formatoptions:对某些列进行格式化的设置formatter:对列进行格式化时设置的函数名或者类型hidedlg:true 是否显示或隐藏此列 不管用!!!!!!!search:true 在搜索模式下,定义此列是否可以作为搜索列 searchoptions:设置搜索参数 arraystype:定义搜索元素的类型 string72页设置checkbox与select }); $('#jqGrid').navGrid("#jqGridPager", { search: true, // show search button on the toolbar searchtitle:"查询", add: true, addtext:"新增", //文字显示 addtitle:"添加一条新纪录", // 鼠标移入显示的提示信息 edit: true, edittext:"编辑", edittitle:"修改记录", del: true, deltext:"删除", deltitle:"删除记录", refresh: true, refreshtitle:"刷新" }, {url:"${path}/sys/updateBnkdata"}, // edit options 更新 {url:"${path}/sys/addBnkdata"}, // add options {url:"${path}/sys/deleteBnk"}, // delete options { multipleSearch: true, uniqueSearchFields : true, multipleGroup : true});// activate the toolbar searching $('#jqGrid').jqGrid('filterToolbar');});
Html:
<div style="margin-left:30px;margin-top: 30px;width: 800px;"> <table id="jqGrid"></table> <div id="jqGridPager"></div> </div>效果图:
1 0
- jqGrid之效果源码
- 【JqGrid】jqGrid API之用法
- jqGrid源码分析(一)
- JqGrid 之 editoptions
- JqGrid之ColModel API
- jqGrid之学习
- jqgrid之编辑custom
- jqGrid之cellEdit
- Jqgrid之合计行
- jqGrid之subGrid
- jqGrid之treeGrid
- jqGrid之日期formatter
- jqGrid表格之subGrid
- jqGrid之group
- jqGrid之属性大全
- jqGrid学习之路
- JqGrid之实际应用
- jqGrid之真分页
- Unable to enable crypto on TCP connection make sure the sslcafile or sslcapath option are properly
- 达观数据分析平台架构和Hive实践
- NYOJ 27 水池数目 (DFS)
- jeesite 导出 文件
- 调试器如何工作(3)
- jqGrid之效果源码
- Scapy基础学习之二
- Android动画效果之:LayoutAnimation
- Spring 基础
- ToggleGroup组件的制作
- errorLINK2001:unresolved external symbol报错
- zabbix 警告发邮件(新手版)
- http conentType file separator
- PHP异步请求 POST和GET方式