jqGrid显示数据,属性,多重表头,子表,行编辑,单元格编辑等 基本
2012-08-22 09:57
295 查看
第一次发帖 可能格式有点差 见谅!
JavaScipt代码:
HTML代码
JavaScipt代码:
<script type="text/javascript"> var lastsel3; //选择一行进行编辑时用到的 $(function(){ $("#list").jqGrid({ url:'studentShow_do.jsp', datatype: 'json', mtype: 'post', colNames:['学号','姓名', '年龄','生日'], colModel :[ {name:'sid', index:'sid', width:155, align:'center',editable:true}, //edittype 修改时设置编辑框的HTML样式的 {name:'sname', index:'sname', width:190, align:'center',editable:true,edittype:'select',editoptions:{value:"1:张三;2:李四;3:王五"}}, //行内编辑时自定义的验证valiAge方法中写验证条件 {name:'age', index:'age', width:180, align:'center',editable:true,editrules:{custom:true,custom_func:valiAge}}, /**对于时间格式的显示formatter:'date'格式化时间和formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'} 配合使用, * H:i:s用于显示时分秒,newformat: 'Y-m-d',当Y为小写时 只显示年份的后两位如1988则显示88;m(月),d(日)为大写时则显示英文(简写)的月日; */ {name:'brith', index:'brith',formatter:'date',formatoptions:{srcformat: 'Y-m-d', newformat: 'Y-m-d'}, width:250, align:'center',editable:true,sorttype:"date"} ], //forceFit : true,//调整列宽度 pager: '#pager',//定义页码控制条Page Bar,需要一个div rownumbers: true, //如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增(翻页后的值与rowList有关)。此列名为'rn'. rowNum:5, //一页中显示的最大条数,返回条数大于此值时,仍显示此值的条数. rowList:[20,50,100],//一个数组,用于设置Grid可以接受的rowNum值 sortname: 'sid',//初始根据哪个列来排序, 当在表格中点击不同的列头,可以实现动态根据某列来排序,将会把点击的列名传到后台来实现根据不同的字段来排序 sortable:true, viewrecords: true, //设置是否在Pager Bar显示所有记录的总数 sortorder: 'asc',//排序asc or desc prmNames:{page:'page',rows:'rows',totalrows:'totalrows',sort:"sidx"},//设置默认传到后台的参数名称 loadtext:'等等', height: '80%', altRow:true, multiselect: true, //是否显示多选框 multiboxonly: false, //是否只有点击多选框时,才执行选择多选框checkbox.默认为false,点击一行亦选定此行的多选框 multiselectWidth: 50, //多选框所在列的宽度 page:1,//初始显示第几页 //cellEdit: true,//与colModel中editable属性配合使用,当editable:true,cellEdit:true时可以对editable:true的列进行单个单元格编辑,cellEdit:false时(colModel中所有列editable都为true时)整行编辑 editurl:'ok.jsp',//编辑栏编辑后发送的地址(整行) cellurl:'ok.jsp',//单元格的发送地址 gridview: true,//构造一行数据后添加到grid中,如果设为true则是将整个表格的数据都构造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用 subGrid : true,//开启显示子表的按钮 caption: "jqGrid test", subGridRowExpanded: function(subgrid_id,row_id) {//显示子表 var subgrid_table_id = "subgrid_"+subgrid_id; $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table>"); $("#"+subgrid_table_id).jqGrid({ url:'studentShow_do.jsp', datatype: 'json', colNames:['学号','姓名', '年龄','生日'], colModel :[ {name:'sid', index:'sid', width:155, align:'center'}, {name:'sname', index:'sname', width:190, align:'center'}, {name:'age', index:'age', width:180, align:'center'}, {name:'brith', index:'brith', width:250, sortable:false} ], height: '100%' }); }, onSelectRow : function(rowid,sid,status){ if(rowid && rowid!==lastsel3){//当选中的不是上一次选中的行就(restoreRow)释放(恢复)上一次选中的行,避免选中多行 jQuery('#list').jqGrid('restoreRow',lastsel3); jQuery('#list').jqGrid('editRow',rowid,true,pickdates); lastsel3=rowid; }else{ jQuery('#list').jqGrid('editRow',rowid,true,pickdates); lastsel3=rowid; } }, loadComplete: function(){ //alert("s"); } }); //多重表头 //顶级表头 jQuery("#list").jqGrid('setGroupHeaders', { useColSpanStyle: false, //没有表头的列是否与表头列位置的空单元格合并 groupHeaders:[ //合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student {startColumnName: 'sid', numberOfColumns: 4, titleText: 'All Student Info'} ] }); //二级表头 jQuery("#list").jqGrid('setGroupHeaders', { useColSpanStyle: false, //没有表头的列是否与表头列位置的空单元格合并 groupHeaders:[ //合并 startColumnName(开始列),以sid列开始; numberOfColumns(合并几列),合并2列; titleText(合并后父列名),合并后父列名为All Student {startColumnName: 'sid', numberOfColumns: 3, titleText: 'Base Student Info'}, {startColumnName: 'brith', numberOfColumns: 2, titleText: 'other'} ] }); jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true}); //$("#list").jqGrid('inlineNav','#pager');//行内编辑 (或与单元格编辑(选择) 引冲突) //对话框 $("#dialog").dialog({ autoOpen: false, show: "blind", hide: "explode" }); }); function pickdates(rowid){ $("#"+rowid+"_brith","#list").datepicker({dateFormat:"yy-mm-dd"});//时间控件 } function valiAge(value,colname) { if (value < 0 || value >120) { return [false,"请填写0-120之间的数字!"]; } else { return [true,"ok"]; } } </script>
HTML代码
<body> <table id="list" border="1"></table> <div id="pager"></div> <div id="dialog" title="Basic dialog"> <p>展示所有学生信息</p> </div> </body>
相关文章推荐
- jgGrid显示数据,属性,多重表头,子表,行编辑,单元格编辑等实例
- Jqgrid插件实现单元格编辑,以及弹出选择数据后赋值。
- JQGrid编辑要显示单元格内容
- easyUI-datagrid属性设置display:none,加载数据或表头不显示
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页
- jqGrid单元格编辑配置,事件及方法
- JqGrid之单元格编辑后保存-yellowcong
- UITableView基本属性二:编辑模式
- Jqgrid入门-显示基本的表格
- jqgrid动态设置某个单元格进入编辑状态
- jqGrid 编辑完数据后能返回到当前位置的方法
- [转]利用GridView显示主细表并一次编辑明细表所有数据的例子
- jqGrid与Struts2的结合应用(三) —— 使用自定义表单对话框编辑Grid数据
- DM36x IPNC OSD显示中文 --- 基本数据准备篇
- GIS属性数据高效显示
- 控制网页中的表格在规定的单元格长度内显示超出单元格长度的数据时能够自动换行
- 地磅称量系统之(12)设计用户编辑数据按钮显示出来的操作风格
- jqGrid与Struts2的结合应用(一) —— 显示基本Grid表格
- php保存数据到数据库到后台显示删除编辑,到前台展示
- easyui多行复杂表头数据显示