grid组件（grid、tree、treeGrid）

zhaixin

grid组件是UI中主要的表现组件之一，是具有较强能力的重量级组件，基础是dhtmlX grid组件，在此基础上增加了列的类型，增加了相关的回调事件，增强了数据加载的能力（注：直接使用grid时可以参考dhtmlX grid的API）。同时grid还是data的数据源，也就是说data（store-type=’grid’）的数据是存放在grid上的。在grid的基础上扩展了treeGrid和tree组件，也就是说treeGrid和Tree的用法和API和grid基本一致。

jishuang

修改grid的列的type的属性值

justep.xbl('grid的id').grid.setCellExcellType(rowid,cellIndex,type类型);
如下：

1. var grid = justep.xbl('grdDEMO_DocKind');
   
2. var data = justep.xbl('dataDEMO_DocKind');
   
3. var rowid = data.getCurrentID();
   
4. grid.grid.setCellExcellType(rowid,2,"txt");
   

复制代码

设置的是rowid这行的第3列的type为txt

腹部流出的肉

zhaixin 发表于 2012-12-4 11:32
grid组件可以按照某列进行分组，并自动计算某些列的合计，即使在用户修改相关数据之后，grid组件也能自动维 ...

就是那个黑线有点讨厌

zhaixin

1、给data组件增加一个计算关系
2、在grid上添加列，将计算关系作为grid的列显示出来，并设置这列的type属性为html
3、在这列的onRender事件中写如下代码

1. mainActivity.grdMain_calculate1Render = function(event){
   
2.     return justep.xbl("dataMain").offset + justep.xbl("dataMain").getIndex(event.rowID) + 1;
   
3. };

复制代码

说明：grdMain是grid组件的id
          dataMain是grid关联的data组件的id
          calculate1是dataMain的计算关系

          以上方法仅适用于分页显示数据，即工具条上放置的是custom-page-item 分页导航；如果使用 next-page-item 下一页 和 all-page-item 所有页 时，由于数据总在一页中显示，直接设置show-index为true即可

运行效果

zhaixin

1、使用grid的方法
隐藏第4列

1. justep.xbl('grid1').grid.setColumnHidden(3,true);
   
2. justep.xbl('grid1').grid.setSizes();

复制代码

显示第3列

1. justep.xbl('grid1').grid.setColumnHidden(2,false);
   
2. justep.xbl('grid1').grid.setSizes();

复制代码

2、使用data的方法
隐藏第4列

1. justep.xbl('dataMain').getStore().setColumnHidden(3, true);   
   
2. justep.xbl('dataMain').getStore().setSizes();

复制代码

显示第3列

1. justep.xbl('dataMain').getStore().setColumnHidden(2, false);   
   
2. justep.xbl('dataMain').getStore().setSizes();

复制代码

说明：setColumnHidden方法的第一个参数是列的索引，第一列是0，第二列是1，以此类推
          setSizes方法是刷新grid的样式的方法，是必须调用的方法

zhaixin

要在grid中显示合计信息，可以使用grid的footer，显示效果如下图所示

本例在footer中显示了行数，具体做法如下
1、在grid组件的onInit事件中添加代码，显示footer

1. mainActivity.grdDetailInit = function(event){
   
2.      this.grid.attachFooter("<div style='height:22px;'><span style='font-size:12px;line-height:22px;'>合计</span></div>,<div style='text-align:center;'><span id='cntValue'/></div>,#cspan,#cspan,#cspan");
   
3. };

复制代码

说明：<div style='height:22px;'>设置了footer的高度
          <div style='text-align:center;'>设置了在这个div中居中显示文本
          <span id='cntValue'/>需要赋值的元素设置id，方便使用s代码赋值
          #cspan表示和左边的列合并
          grid有几列，在footer中就有几个<span>或#cspan，这样footer的长度才能和grid的宽度一致
          在<span>外面放<div>是为了显示样式，有些样式设置在<span>里面不起作用，设置在<div>上起作用

2、在data组件的onAfterRefresh事件中添加代码，给footer中的元素赋值

1. mainActivity.dataDetailAfterRefresh = function(event){
   
2.     $("#cntValue").html(justep.xbl("dataDetail").getCount()+"条");
   
3. };

复制代码

说明：在适当的事件中给footer中的元素赋值
          如果是分页显示记录，希望显示总记录数，可以使用data组件的getTotal方法，获得总记录数
          如果希望显示grid中某列的合计，可以使用justep.XData.sum方法，获得grid中某列的合计值
          如果希望显示全部数据中某列的合计，可以使用data组件的getAggregateValue方法，获得某列的合计值。关于合计值AggregateValue的计算，请看帖子http://bbs.justep.com/forum.php?mod=viewthread&tid=39784&page=1&extra=#pid164962962

zhaixin

grid组件可以按照某列进行分组，并自动计算某些列的合计，即使在用户修改相关数据之后，grid组件也能自动维护这些分组合计值。显示效果如下图所示

具体做法如下
在model组件的onLoad事件中调用grid组件的groupBy方法，设置grid显示分组

1. mainActivity.mdDefaultLoad = function(event){
   
2.     var grid = justep.xbl("grdDetail").grid;
   
3.     grid.groupBy(1,["","#title","","","#stat_total"]);
   
4. };

复制代码

说明：grdDetail是grid组件的id
          justep.xbl("grdDetail")获得grid组件的js对象
          justep.xbl("grdDetail").grid;获得grid组件里面的dhtmlgrid对象
          groupBy是dhtmlgrid的显示分组的方法。第一个参数是分组的列索引，第一列是0，第二列是1，以此类推；第二个参数设置各列的显示内容
          其中："#title"表示显示分组名称
                    "#stat_total"表示显示该列的合计值
                    ""表示不显示内容


        如果不显示合计，可以使用grid.groupBy(0)，将合并所有的列
        如果显示合计，可以使用cspan来进行列合并，例如，合并前3列，显示分组信息
        grid.groupBy(0,["#title","#cspan","#cspan","","#stat_total"]);

zhaixin

grid的多选


tree的多选


treeGrid的多选


下面做个对比

	grid的多选	tree、treeGrid的多选
使用方法	设置column的type属性为ch	设置grid的multi-selection属性为true
选中触发事件	触发data组件的onValueChanged事件	触发grid组件的onRowCheck等事件
获得选中行ID的方法	var grid = justep.xbl("grdMain").grid; var checkColIndex = grid.getColIndexById("fCheck"); var checkedIDs = grid.getCheckedRows(checkColIndex); alert(checkedIDs);	var grid = justep.xbl("grdMain").grid; var checkedIDs =grid.getCheckedRowIds(); alert(checkedIDs);
代码设置选中 （以当前行为例）	var rowid = justep.xbl("dataMain'").getCurrentID(); justep.xbl("dataMain'").setValue("fCheck",1,rowid);	var rowid = justep.xbl('dataMain').getCurrentID(); justep.xbl('grdMain').grid.setItemChecked(rowid, true);
代码取消选中 （以当前行为例）	var rowid = justep.xbl("dataMain'").getCurrentID(); justep.xbl("dataMain'").setValue("fCheck",0,rowid);	var rowid = justep.xbl('dataMain').getCurrentID(); justep.xbl('grdMain').grid.setItemChecked(rowid, false);
代码设置全选	justep.xbl("grid").grid.setCheckedRows(0,1); //设置某列全选中，第一个参数是列索引， 第二个参数1表示选中，0表不选中 justep.xbl('grid').grid.checkAll(true); //设置grid内所有checkbox是否全部选中	无
代码控制列头上的checkbox	var grid = justep.xbl("grdMain").grid; var o = grid.getHeaderMasterCheckbox();//获得列头上的checkbox o.checked="1";//设置选中 o.checked="";//取消选中 从x5.2.6版本开始提供了更直接的方法 var grid = justep.xbl("grid").grid; grid.setHeaderMasterCheckboxState(true);//设置选中	无

说明：grid的多选需要使用概念中的一个关系，也可以使用data组件的计算关系
         tree、treeGrid的多选不需要使用另外的关系
         grdMain是grid组件的id
         fCheck是用于多选的关系
         dataMain'是grid组件关联的data组件的id
         用代码控制列头上的checkbox，只是将列头上的checkbox设置为选中或取消选中，和用鼠标点列头上的checkbox效果不同，不会影响grid中各行的选中状态，如果希望改变grid各行的选中状态，可以参照上表给出的方法（代码设置选中、代码取消选中）实现。

zhaixin

1. justep.xbl('grdMain').grid.setColumnLabel(2,"新的标题");

复制代码

说明：'grdMain'是grid组件的id
          setColumnLabel设置某列的标题。第一个参数是列的索引，第一列是0，第二列是1，以此类推；第二个参数是新的标题。

zhaixin

实现方法：设置column的label属性，在需要分层的地方输入|，如下图所示

zhaixin

实现方法：设置column的label属性，在需要换行的地方输入<br/>，如下图所示

zhaixin

两种方式，都是设置column的width属性
1、设置为#——根据列中显示的信息，控制列宽
2、设置为*——自动充满grid的剩余宽度，如果有多列都设置为*，各列平均分摊grid的剩余列宽

width设置为#，是指在打开功能时，系统根据列的内容计算出了列宽，在用户修改了内容之后，现有的列宽可能需要调整，可以调用下面的代码，实现自适应列宽

1. var grid = justep.xbl("grdDetail").grid;
   
2. var idx = grid.getColIndexById("fDW");
   
3. grid.adjustColumnSize(idx);

复制代码

说明：grdDetail是grid组件的id
          fDW是要调整列宽的列指向的关系