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="text">Code</th>
<th colspan="2">Group Fields</th>
</tr>
<tr>
<th field="name" width="200" editor="text">Name</th>
<th field="addr" width="200" editor="text">Addr</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="80">Item ID</th>
<th field="productid" width="100" formatter="productFormatter"editor="{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="right"editor="numberbox">Unit Cost</th>
<th field="attr1" width="150" editor="text">Attribute</th>
<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
显示效果如下: