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>

显示效果如下:





posted @ 2012-02-13 10:35  awp110  阅读(2370)  评论(0编辑  收藏  举报