jQuery("#ghcs").jqGrid('setGroupHeaders', { //设置列头是否启用colSpan效果 useColSpanStyle: false, groupHeaders:[ { startColumnName: 'colName', //合并列组的第一个列名 numberOfColumns: number, //合并列的数量 titleText: 'title' //合并列的标题 }, ........ ] }
编辑器
jqGrid的模板列自带了一些很基本的编辑器，包括：'text'单行文本框, 'textarea'多行文本框, 'select'下拉框, 'checkbox'复选框, 'password'密码框, 'button'按钮, 'image'图片按钮, 'file'文件上传框 以及'custom'自定义编辑器。
在colModel里设置edittype则可
jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}....}, ... ] ... });
其中editoption是对编辑器的一些设置，文本框就可以设置size,maxlength等；复选框可设置value ；
ditoptions: { value:"Yes:No" }
下拉框以这种形式
editoptions: { value: “val1:text1; val2:text2; val3:text3” }
更多资料参阅
模板列调用其他编辑器
上面介绍的编辑器只是使用了html的表单元素而已，下面介绍的是调用插件。
<script src="https://www.jb51.net/js/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script type="text/javascript"> function InitDatePicker(cl) { $(cl).click(function () { WdatePicker(); }); } .... jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'date', ..., editable:true, edittype:'text',editoptions: {dataInit:InitDatePicker}....}, ... ] , ... }); ....... </script>
这里调用了My97DatePicker插件作为日历编辑器。
如果想在一个模板列里放置多种控件，可以用一下方式
jQuery("#grid_id").jqGrid({ ... afterInsertRow: function (rowid, aData) { var controls=" "; //放置在模板里的控件 ....... $("#grid_id").jqGrid('setCell', rowid, 'tag', controls); } ... });
这个其实是在grid的单元格内通过编辑其html来实现。
模仿Excel移动选择单元格
设置单元格编辑模式后，可以通过上下左右的导航键跳到需要编辑的单元格，按回车进入编辑状态，按Esc键不保存更改内容，按回车保存更改内容
jQuery("#grid_id").jqGrid({ ... cellEdit:true, cellsubmit:'clientArray', //定义了单元格内容保存位置 默认值是'remote' ... });
以上所述是小编给大家介绍的jqGrid用法汇总，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: