1.4.3. 列表组件

框架使用javascript实现的EXT风格的表格进行列表数据的展现和处理，包括ajax翻页、排序、查询、点击事件、checkbox选择、数据提交等。

最简单的表格创建代码如下：

var t = $("#mytable").ajaxgrid({1
      colModel : [ {
        display : 'id',
        name : 'orgid',
        width : '40',
        type : 'checkbox'
      }, {
        display : '组织名称',
        name : 'orgname',
        width : '180',
        sortname : 'o.orgname',2
        cutsize : 23
      }, {
        display : '父组织ID',
        name : 'parentid',
        width : '180'
      } ],
      managerName : "testPagingManager",4
      managerMethod : "testPaging"5
    });
    var o = new Object();
    o.orgname = "%";
    $("#mytable").ajaxgridLoad(o);6

<table id="mytable" style="display: none"></table>7

1

调用jquery插件的ajaxgrid函数初始化表格组件，colModel为表格列定义配置

2

通过sortname属性，可以改变点击表格列头的默认排序字段名称（默认取name属性值），在多表联查需要指定具体表前缀时可以用此自定义排序字段名称处理

3

cutsize属性用于设置改字段显示时要截取到的长度，比如日期显示不想带时分秒，则截取固定长度10保留年月日

4

Ajax翻页调用的Manager在sprint中的bean id

5

Ajax翻页调用的Manager的方法，接收参数必须是两个(FlipInfo fi, Map param)，翻页信息类和查询参数map

6

页面加载完成之后调用ajaxgridLoad进行首次数据加载，输入参数对象为查询条件(Manager方法的第二个参数接收)，另外，也可利用表单 自动回填机制，在controller中做如下动作： 

TestPagingManager testBS = (TestPagingManager) AppContext.getBean("testPagingManager");
Map param = new HashMap();
param.put("orgname", "%");
FlipInfo fi = testBS.testPaging(new FlipInfo(), param);
fi.setParams(param);1
request.setAttribute("ffmytable", fi);2

1

如果需要在前端表格翻页或其它操作时续传初始条件参数，需要调用FlipInfo的setParams设置后续ajax表格操作参数

2

ff表示需要自动回填，之后为要回填的表格id，值必须为FlipInfo翻页信息对象

7

隐藏样式的table元素定义

表格组件的各种功能例子代码如下：

<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<html>
<head>
<title>AjaxPagingGrid测试</title>
<script text="text/javascript">
  $(function() {
    var t = $("#mytable").ajaxgrid({
      searchHTML : 'searchHTML',1
      click : clk,2
      dblclick : dblclk,3
      render : rend,4
      colModel : [ {
        display : 'id',
        name : 'orgid',
        width : '40',
        sortable : false,
        align : 'center',
        type : 'checkbox'
      }, {
        display : '组织名称',
        name : 'orgname',
        width : '180',
        sortable : true,
        align : 'left'
      }, {
        display : '父组织ID',
        name : 'parentid',
        width : '180',
        sortable : true,
        align : 'left',
        codecfg : "codeId:'test_code'"5
      } ],
      searchitems : [ {
        display : '组织ID',
        name : 'orgid'
      }, {
        display : '组织名称',
        name : 'orgname'
      } ],
      width : 1200,
      height : 400,
      managerName : "testPagingManager",
      managerMethod : "testPaging"
    });
    function rend(txt,data, r, c) {
      if (c == 0)
        return '<input type="checkbox" value="'+txt+'">';
      else
        return txt;
    }
    function clk(data, r, c) {
      $("#txt").val("clk:" + $.toJSON(data) + "[" + r + ":" + c + "]");
    }
    function dblclk(data, r, c) {
      $("#txt").val("dblclk:" + $.toJSON(data) + "[" + r + ":" + c + "]");
    }
    $("#btn").click(function() {
      var v = $("#mytable").formobj({6
        gridFilter : function(data, row) {
          return $("input:checkbox", row)[0].checked;
        }
      });
      alert($.toJSON(v));
    });
  });
</script>
</head>
<body class="body-pading" leftmargin="0" topmargin="" marginwidth="0" marginheight="0">
    <input id="txt" type="text" size="100">
    <input id="btn" type="button" value="取数">
    <div class="classification">
        <div class="title">grid示例</div>
        <div class="list">
            <div class="button_box clearfix">
                <table id="mytable" style="display: none"></table>
            </div>
        </div>
    </div>
    <div id="searchHTML">
        组织ID：<input name="orgid" type="text" />组织名称<input name="orgname" type="text" />
    </div>
</body>
</html>

1

自定义查询区域

2

单击事件

3

双击事件

4

function rend(txt,data, r, c)，自定义渲染器，可以对单元格显示数据和样式进行加工展现，txt为渲染单元格文本，data为渲染行数据对象，r为行，c为列

5

定义框架自动枚举转换规则，具体请参考“枚举组件”部分说明

6

获取表格数据对象，用于ajax或其它处理操作 另外，还可以使用$("#mytable").ajaxgridData(objs)手工加载数据，objs结构为{ rows : [], page : 0, total : 0 }，rows为数据对象数组，page为页，total为总记录数

实例

属性

属性 类型 类型
colModel   列描述，要求是一个数组（必须提供该参数）其中的每一个元素都应该是一个Object。colModel : [ { display : 'id',//对应数据中的字段名 name : 'orgid', width : '40%',//宽度可为数字或百分比[字符串] type : 'checkbox',//是否是checkbox或radio[一般只有第一列显示] hide:false//默认显示与否, sortType:'number', //按数字排序 },{ display : 'id1',//对应数据中的字段名 name : 'orgid1', width : '40%',//宽度可为数字或百分比[字符串] type : 'date',//是否是checkbox或radio[一般只有第一列显示] hide:false//默认显示与否, sortType:'date',//按时间排序 isToggleHideShow:false//控制在表头下拉菜单中是否显示列项[默认把name为'id','name','title'隐藏了] }]
managerName   后台Manager的名称（必须提供该参数）
managerMethod   后台对应Manager的方法名（必须提供该参数）
click   单击事件返回值:row(行json对象),colIndex(所在列index值),rowIndex(所在行index值)
dbclick   双击事件返回值:row(行json对象),colIndex(所在列index值),rowIndex(所在行index值)
height   高度[px]，默认200px
width   宽度值[px],默认auto表示根据每列的宽度自动计算
resizable   是否可伸缩
usepager   是否分页[false]
page   默认当前页[1]
total   总页面数[1]
useRp   是否可以动态设置每页显示的结果数[true]
rp   每页默认的结果数[15]
rpOptions   可选择设定的每页结果数[10,15,20,25,40]
title   是否包含标题[false]
query   搜索查询的条件
qtype   搜索查询的类别
nomsg   无结果的提示信息
blockOpacity   透明度设置
onChangeSort   当改变排序时执行的函数，默认为false。当该属性设置时，组件不再使用自己的查询机制。
onCurrentPageSort   是否只对当前页的数据进行排序，默认为false。当设置为true时，只对当前页的数据进行排序。
onSuccess   成功后执行的函数
slideToggleBtn bool 上下伸缩按钮是否显示
slideToggleUpHandle function 向上按钮委托执行的方法
slideToggleDownHandle function 向下按钮委托执行的方法
resizeGridUpDown   动态设置分割条位置，参数为'up','middle','down'。grid.grid.resizeGridUpDown('up')
customize   是否启用个性化存储，默认为true
customId   个性化存储id ，默认值为$.ctx._currentPathId,自定义的化在默认值后添加后缀,例如customId : $.ctx._currentPathId_+"${xxx.ff}";

方法
方法 描述
获取grid参数 grid.p//得到该grid所有参数
获取grid事件 grid.grid//得到该grid处理方法
getSelectRows() var rows = grid.grid.getSelectRows(); //获取列表组件选中行记录,返回值为数组[{"id": 10001, ... },{"id": 10001, ... }]
callBackTotle 设置totle条数回调函数 类似:render

Prev  Up  Next
  Home