lazyTreeGrid 应用

项目中使用LazyTreeGrid终于有了突破性的进展。把这段的核心的代码分享一下

<div id="gridDiv3" style="display: none;font-size:12px;height:100%;" dojoType="dojox.grid.LazyTreeGrid" rowsPerPage="20"

treeModel="DG.treeModel1" expendoCell ="0" colSpans="{0: [{start: 1,end: 20,primary: 12}]}"

structure="DG.mixedWorkItemslayout" rowSelector="0px" plugins="{menus:{rowMenu:'DG.gridMenu'}}" escapeHTMLInData=false>

写在页面上的treeModel和structure在操作起来会有很多的不方便。

//设置显示标题，该方法要在加载DG.mixedWorkItemslayout之前加载。

var fmtName = function(value, idx, level,row)

{

if(value){

if(level==0)

{

var shortValue;

var subject;

var countValue;

if(value.indexOf("待")!= -1){

try{

shortValue= value.substring(value.indexOf("\">")+2,value.length);

subject = shortValue.substring(0, shortValue.indexOf("("));

countValue = shortValue.substring(shortValue.indexOf("(")+1,shortValue.indexOf(")"));

countHref ="<a href=\"javascript:void(0);\" style=\"text-decoration:underline\"; onclick=\"showMore('"+shortValue+"')\">"+countValue+"</a>";

value = subject +"    (" + countHref +")";

}catch(e){}

}else{

try{

shortValue= value.substring(value.indexOf("\">")+2,value.length);

value ="<a href=\"javascript:void(0);\" style=\"text-decoration:underline\"; onclick=\"showMore('"+shortValue+"')\">"+value+"</a>";

}catch(e){}

}



}

}

return value;



};

DG.mixedWorkItemslayout = [

{field : 'status', name : res.status, width : '55px', get:getLockedInfo},

{field : 'subject', name : res.subject, width : '260px', get:setLink},

{field : 'createdUnit', name : res.orgName, width : '180px', get:getShortOrgName},

{field : 'displayWorkFlowName', name : res.displayWorkFlowName, width : '135px', get:getShortDisplayWorkFlowName},

{field : 'previousUser', name : res.previousUser, width : '50px', get:getShortPreviousUser},

{field : 'receiveTime', name : res.receiveTime, width : '120px', get:getReceiveTime},

{field : 'displayStepName', name : res.displayStepName, width : '150px', get:getDisplayStepName},

{field : 'workKind', name : res.workKind, width : '80px', get:getWorkKind},

{field : 'displayOriginator', name : res.displayOriginator, width : '50px', get:getDisplayOriginator},

{field : 'startTime', name : res.startTime, width : '120px', get:getStartTime,hidden: true},

{field : 'fileCode', name : res.fileCode, width : '200px', get:getFileCode, hidden: true},

{field : 'processName', name : res.processName, width : '200px', get:getProcessName, hidden: true},

{field : 'workflowNumber', name : res.processCode, width : '200px', get:getProcessCode,formatter:fmtName},

{field : 'wobNum', name : 'wobNum', width : '100px', hidden: true},

{field : 'workType', name : 'workType', width : 'auto',hidden: true},

{field : 'handID', name : 'handID', width : 'auto',hidden: true},

{field : 'categoryItemId', name : 'categoryItemId', width : 'auto',hidden: true},

{field : 'queryType', name : 'queryType', width : 'auto',hidden: true} ,

{field : 'stepName', name : 'stepName', width : 'auto',hidden: true},

{field : 'urgency', name : 'urgency', width : 'auto',hidden: true},

{field : 'formId', name : 'formId', width : 'auto',hidden: true}

];

要设置treeModel，要不然出现的树没有展开的标记

DG.treeModel1 = new dijit.tree.ForestStoreModel({store: new dojo.data.ItemFileWriteStore( {

data : {identifier: 'subject',label: 'subject',items:[]

}

}), childrenAttrs: ['children']});





//添加isMore参数为了区分是否为点击“更多”加载的数据

var requestJson = null;

DG.doRequest = function (action, itemType,isMore) {

console.log("DG.doRequest:", action, itemType);

if (action != "") {

var grid = dijit.byId("gridDiv");

var grid2 = dijit.byId("gridDiv2");

var grid3 = dijit.byId("gridDiv3");

// Clear previous results.

grid.setStore(null);

grid.showMessage(res.loading);

grid2.setStore(null);

grid2.showMessage(res.loading);

grid3.setStore(null);

grid3.showMessage(res.loading);



if(isMore == undefined){

if(moreIndex !=undefined){

changeClassNameNone(moreIndex);

moreIndex = undefined;

}



}



if(action =="getMixedWorkList.do"){



requestJson = {

url : action,

handleAs : "json",

preventCache : false,

load : function(data) {

dojo.byId("currentAction").value = action;

var store = new dojo.data.ItemFileWriteStore( {

data : data[0]

});

//grid3.setStore(store);

var treeModel = new dijit.tree.ForestStoreModel({store: store, childrenAttrs: ['children']});

grid3.setModel(treeModel);

//在页面初始化，展开所有的树

expandAll();

//改变首行颜色

changeCell(grid3);

NavTree.refreshTaskCount();

}

};

ECIS.xhrGet(requestJson);



}else{

requestJson = {

url : action,

handleAs : "json",

preventCache : false,

load : function(data) {

dojo.byId("currentAction").value = action;

var store = new dojo.data.ItemFileWriteStore( {

data : {

items : data

}

});

if(data != null) {

// 修改分页，hzy

var pageData = data.length >1 ? data[data.length - 2] : 1;

data.splice(data.length - 2,1);

var totalPage = data.splice(data.length - 1,1);

DG.showPagination(pageData,totalPage);

}

grid.setStore(store);

grid2.selection.clear();

grid2.setStore(store);

if (grid.rowCount == 0 || grid2.rowCount == 0) {

grid.showMessage(res.nodata);

grid2.showMessage(res.nodata);

grid3.showMessage(res.nodata);

}



if(dojo.byId("perPageSize") != null) {

dojo.byId("perPageSize").value = dojo.byId("currentPerPageSize").value;

}

NavTree.refreshTaskCount();

}

};

ECIS.xhrGet(requestJson);

}





}

};

//改变grid首行颜色

function changeCell(grid)

{

//表格行样式修改

dojo.connect(grid, "onStyleRow", function(row) {

var table= row.node.children[0];//获得行所在的table

try{



if(table.rows[0].cells.length == 2){

var everyrow = table.rows[0];

var value=everyrow.cells[1].innerHTML;

var shortValue = value.substring(0,value.indexOf(" "));

for(var i = 0; i <2 ; i =i+1)

{

if(shortValue =="个人待办"|| shortValue =="公办待办"||shortValue =="受托待办"||shortValue =="个人待阅" ||shortValue =="公办待阅")

{

//设置首行的css样式

everyrow.cells[i].className = "privateTaskCss";

}

}

}

}catch(e){



}

});

//渲染页面

grid.render();

}

最终效果：