如何在Struts2 jquery Grid中添加子列标题和符号

时间:2014-01-24 03:52:19

标签: jquery jqgrid struts2

我要求在Struts2-Jquery Grid中实施一列 像贝娄一样

------------------------------  
col1    |   col2 is main column
________|________________________
        |  Sub col1 | Sub col 2
________|___________|____________                 

   /* Data */ in rows format 

我和我想在子列中添加Tick符号。可以任何人请帮助我如何实现这一目标 我正在使用Struts2 Jquery grid

以下是我的JSP页面请告诉我我在做错误的地方。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  <%@page contentType="text/html" pageEncoding="UTF-8"%>
  <%@ taglib prefix="s" uri="/struts-tags"%>
  <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
  <%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
 <html>
     <head>
       <sj:head jquerytheme="redmond" jqueryui="true" />
       <title>JSP Page</title>
       <script type="text/javascript">
    function doGridComplete()
    {
        $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] }).trigger("reloadGrid");            
    } 


  </script>
    </head>
   <body>
   <s:form name="testform"  >

    <s:url id="topgrid" action="countrygrid"/>
    <s:url id="middlegrid" action="stategrid"/>
    <s:url id="bottomgrid" action="citygrid"/>

    <sjg:grid dataType="json" gridModel="gridModel" navigator="false"
              pager="true"
              viewrecords="true" width="600"
              href="%{topgrid}"
              height="400"
              id="gridId"
                >

        <sjg:gridColumn name="idcountry" title="Country Id" labelSeparator="jak" label="HI this is lable">
        </sjg:gridColumn>
        <sjg:gridColumn name="countryname"  disabled="true" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
        <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>

    </sjg:grid>
    <script language='JavaScript' type='text/JavaScript'>

    function doGridComplete()
    {
        $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'idcountry', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] }).trigger("reloadGrid");            
    } 
    doGridComplete();

   </script>
            </s:form>
    </body>
</html>

My Grid Output When I do click on column headers

1 个答案:

答案 0 :(得分:2)

在网格后调用doGridComplete()

<sjg:grid dataType="json" gridModel="gridModel" navigator="false"
          pager="true"
          viewrecords="true" width="600"
          href="%{topgrid}"
          height="400"
          id="gridId" 
          onGridCompleteTopics="gridcomplete">

    <sjg:gridColumn name="idcountry" title="Country Id" labelSeparator="jak" label="HI this is lable">
    </sjg:gridColumn>
    <sjg:gridColumn name="countryname" title="Country Name" key="true" align="center"/>
</sjg:grid>

<script language='JavaScript' type='text/JavaScript'>

        function doGridComplete()
        {
             $("#gridId").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders:[ {startColumnName: 'sub_Col1_name', numberOfColumns: 2, titleText: '<em>col2 is main column</em>'}] });            
        } 
        doGridComplete();

</script>
sub_Col1_name中的

startColumnName是要从中开始标题分组的列的名称。希望这会有所帮助。