treegrid.docVIP

jquery easyui treegrid使用小结：一 在easyui中的datagrid和treegrid两个应用中，我们会用到对editor设置单行编辑时每列的编辑类型，这个的应用在easyui下载的包目录的Demo文件夹中也可找到应用例子，如： html:?table id=tt title=TreeGrid class=easyui-treegrid style=width:600px;height:300px???url=treegrid_data3.json idField=id treeField=code???pagination=true fitColumns=true??thead???tr????th field=code rowspan=2 width=150 editor=textCode/th????th colspan=2Group Fields/th???/tr???tr????th field=name width=200 editor=textName/th????th field=addr width=200 editor=textAddr/th???/tr??/thead?/table datagrid table id=tt style=width:650px;height:auto???title=Editable DataGrid iconCls=icon-edit singleSelect=true???idField=itemid url=datagrid_data2.json??thead???tr????th field=itemid width=80Item ID/th????th field=productid width=100 formatter=productFormattereditor={type:combobox,options:{valueField:productid,textField:name,data:products,required:true}}Product/th????th field=listprice width=80 align=right editor={type:numberbox,options:{precision:1}}List Price/th????th field=unitcost width=80 align=righteditor=numberboxUnit Cost/th????th field=attr1 width=150 editor=textAttribute/th????th field=status width=60 align=center editor={type:checkbox,options:{on:P,off:}}Status/th???/tr??/thead?/table 显示效果如下：  jquery easyui treegrid使用小结：二 在实际应用中可能会碰到不同的需求，比如会根据每行不同的参数或属性设置来设置同列不同的editor类型，这时原有的例子就显的有点太过简单，不能实现我们的需求，现在应用我在项目中的操作为例，显示下实现同列不同操作的情况：（在这，我把例子的情况完全整合到了js里面配置实现，如有习惯于js实现方式的也可参考） html: table id=comTypeAndPropertyTree/table//个人觉得这样更显的页面清晰，所有的配置都放到js里实现 js: var types = [????? {typeId:0,typeName:Normal},????? {typeId:1,typeName:URL},????? {typeId:2,typeName:Symbol}??];??$(function(){?? ??var lastIndex;???$(#comTypeAndPropertyTree).treegrid({????title:产品库配置,????height:550,????rownumbers: true,????animate:true,????url:getComTypeAndPropertyTreeRoot.action,????idField:id,//id=productId_propId_largetypeId_midlletypeId_comtypeId;????treeField:name,????frozenColumns:[[???????????????? {title:名称,field:name,widt