jqGrid合并表头

摘录他人仅供学习。

<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>
时间: 2024-10-06 07:37:11

jqGrid合并表头的相关文章

jqgrid 合并表头

参考:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar jQuery("#表格id").jqGrid({ ... colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], colModel: [ {name: 'invdate', index: 'invdate', width: 80

NPOI导出Excel合并表头写入公式

protected void Btn1_Click(object sender, EventArgs e) { //建立空白工作簿 IWorkbook workbook = new HSSFWorkbook(); //在工作簿中:建立空白工作表 ISheet sheet = workbook.CreateSheet(); #region //在工作表中:建立行,参数为行号,从0计 IRow row = sheet.CreateRow(0); //在行中:建立单元格,参数为列号,从0计 ICell

handsontable合并表头

想在页面中做类似excel的操作,发现handsontable符合要求. 然后发现这个文章 http://blog.csdn.net/wynan830/article/details/9054195 该作者扩展了handsontable实现了多表头. 同时添加了removeRowPlugin属性,作用是在每行前面显示一个删除按钮执行删除操作. 我的页面中不需要删除,因此把removeRowPlugin设置为false.但是表头出现了错行. 查看生成的html发现,表头中多了一列:<th clas

GridView合并表头、多重表头(转)

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { switch (e.Row.RowType) { case DataControlRowType.Header: //第一行表头 TableCellCollection tcHeader = e.Row.Cells; tcHeader.Clear(); tcHeader.Add(new TableHeaderCell()); tcHeader[

转载&gt;&gt;JQuery EasyUI datagrid 合并表头处理

本文转自:http://www.cnblogs.com/nangong/p/ccdfabb7ccedbfa580acc6eeef286a27.html 例子1: $('#day_health').datagrid({ url: "sqb_bweb_day_health.aspx?mode=day_health", pagination: true, total: 2000, pageSize: 10, pageList: [10, 20, 30, 40, 50, 60, 70, 80,

NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部分为表头部分,蓝色前面几行是博主项目的基础样式,称为元数据),这类excel的表头多为2-3行,甚至于5/6行 ,具有合并层级关系,看似复杂,但只需要在我们以前的基础上稍微做一下重构就可以完美实现解析. 我们以各地区户籍人口城乡构成表头为例: 其实,只要我们能准确解析这类表头所表达的意思,就能复用以

vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv

GRIDVIEW多行多列合并单元格(合并列)

GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 两篇文章:  GridView多行多列合并单元格(完整代码和例子)和 GridView多行多列合并单元格(指定列合并).今天继续再添加一些功能,首先看下图: 左边是原始数据的显示,右边是应用合并列之后的效果. 从图中可以看到,二级指标有两列,有的行中两列的内容一样,有的则不一样,如果实现如右图所示,看起来效果会更好一些.下面就着手实现这个功能,我的实现原理很简单,就是遍历GridV

自定义控件:DataGridView多维表头

[datagridview与treeview绑定] treeview            代码: DataTable dtable = new DataTable("Rock"); //添加8列 dtable.Columns.Add("1", typeof(System.String)); dtable.Columns.Add("2", typeof(System.String)); dtable.Columns.Add("3&quo