jqGrid之效果源码

﹏ヽ暗。殇╰゛Y 2022-08-23 00:42 140阅读 0赞

$(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开始递增 此列名为rn
    					scrollrows：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:设置搜索参数 array
    					stype:定义搜索元素的类型 string
    					72页设置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：

效果图：

![Center][]

[Center]: /images/20220722/19814558a9844e5a95faca971ee9a0b2.png