扩展grid组件（使用onRender事件）

zhaixin

grid组件的列支持输入文字、显示文字、下拉框选择、上传附件、显示索引等，
如果希望显示按钮、图片等内容，需要将列的type属性设置为html，在列的onRender事件中返回html片段，grid组件即可将html片段展示在该列中

在onRender事件中，通过event参数可以访问到的值如下

当前行rowid           event.rowId

当前单元格的值      event.value

当前行其它列的值   event.cell.getValueByColId('关系名')

zhaixin

1. var fid = event.rowId;
   
2. var html = "<button id="btnupdate" onclick="mainActivity.updateWork('" + fid + "')" >编辑</button>"
   
3.          + "<button id="btndelete" onclick="mainActivity.deleteWork('" + fid + "')">删除</button>"
   
4.          + "<button id="btnselect" onclick="mainActivity.selectWork('" + fid + "')" >查看</button>";
   
5. return html;
   

复制代码

zhaixin

1. var fid = event.rowId;
   
2. var html = "<a href="javascript:mainActivity.selectWork('" + fid + "')">" + event.value + "</a>";
   
3. return html;

复制代码

zhaixin

1. var fid = event.rowId;
   
2. var html = "<input type="checkbox" name="checkbox" id="" + fid + "">";
   
3. return html;

复制代码

zhaixin

1. var html = "<img src='"+justep.Request.convertURL("/UI/system/images/collapsed.gif",true)+"'/>";
   
2. return html;

复制代码

图片可以来自于数据库，文档服务器。详细代码参考
在grid中显示图片http://bbs.justep.com/forum.php?mod=viewthread&tid=37294

zhaixin

1. mainActivity.grid1_fOwnerIDRender = function(event){
   
2.     var fid = event.rowId;
   
3.     var html = "<input type='radio' value='0' name='"+fid+"' "+ifChecked("0",event.value)+"  onclick="saveRadio('"+fid+"',0)">芒果</input>"
   
4.               +"<input type='radio' value='1' name='"+fid+"' "+ifChecked("1",event.value)+"  onclick="saveRadio('"+fid+"',1)">苹果</input>";
   
5.     return html;
   
6. }
   
7. 
   
8. function ifChecked(value,colValue){
   
9.     if(value==colValue)
   
10.         return "checked"
    
11.     else
    
12.         return "";   
    
13. }
    
14. 
    
15. function saveRadio(rowID,value){
    
16.     justep.xbl("bizData1").setValue("fOwnerID", value, rowID);
    
17. }

复制代码

zhaixin

以grid中的某列为例，其它的列也调用这个方法，注意每列的列名不同。
做法是，在grid的单元格中放一个div，给div添加单击事件，在事件中给关系赋值，在render事件中用这个值来控制显示的信息

1. mainActivity.grdMain_fZXGXRender = function(event){
   
2.         var value;
   
3.         if(event.value=="1")
   
4.                 value = "√";
   
5.         else
   
6.                 value = "";
   
7.         return "<div style="width:100%;height:100%" onclick="selectCell('"+event.rowID+"','fZXGX');">"+value+"</div>";
   
8. };
   
9. 
   
10. function selectCell(rowid,col){
    
11.         var data = justep.xbl("dataMain");
    
12.         var value = data.getValue(col,rowid);
    
13.         if(value=="1")
    
14.                 value = "0";
    
15.         else
    
16.                 value = "1";
    
17.         data.setValue(col,value,rowid);
    
18. };
    

复制代码

kgagag

zhaixin 发表于 2013-1-4 15:05
以grid中的某列为例，其它的列也调用这个方法，注意每列的列名不同。
做法是，在grid的单元格中放一个div， ...

raystar27

好东西啊，收藏了！

jishuang

在onReader事件中获取此列后面的列值的方法

可以通过cell的方法获取，如下：
event.cell.getValueByColId('列名')
event是onReader中的参数