-
在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>显示效果如下:
- 在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的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',width:300,
- formatter:function(value){
- return '<span style="color:red">'+value+'</span>';
- }
- }
- ]],
- columns:[[
- {title:'library',field:'library',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(!row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }},
- {title:'显示名称',field:'displayName',width:100,editor:'text'},
- {title:'type',field:'type',width:100,
- editor:{type:'combobox',options:{valueField:'typeId',textField:'typeName',data:types}},
- formatter:function(value,row){
- if(row.leaf){
- for(var i=0; i<types.length; i++){
- if (types[i].typeId == value) return types[i].typeName;
- }
- return types[0].typeName;
- }else{
- return '';
- }
- }
- },
- {title:'Expose',field:'expose',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }},
- {title:'Annotate',field:'annotate',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Load',field:'load',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Name Available',field:'nameAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Value Available',field:'valueAvailable',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Export As OAT',field:'exportAsOAT',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Required',field:'required',width:100,editor:{type:'checkbox',options:{on:'1',off:'0'}},
- formatter:function(value,row){
- if(row.leaf){
- if(value==1){
- return '<img src="images/checkbox_checked.jpg"/>';
- }else{
- return '<img src="images/checkbox_unchecked.jpg"/>';
- }
- }else{
- return '';
- }
- }
- },
- {title:'Units',field:'units',width:100,editor:'text',
- formatter:function(value,row){
- if(row.leaf){
- return value;
- }else{
- return '';
- }
- }},
- {title:'VM',field:'vm',width:100,editor:'text',
- formatter:function(value,row){
- if(row.leaf){
- return value;
- }else{
- return '';
- }
- }}
- ]]
- ,onClickRow:function(row){//运用单击事件实现一行的编辑结束,在该事件触发前会先执行onAfterEdit事件
- var rowIndex = row.id;
- if (lastIndex != rowIndex){
- $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);
- }
- }
- ,onDblClickRow:function(row){//运用双击事件实现对一行的编辑
- var rowIndex = row.id;
- if (lastIndex != rowIndex){
- $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);
- $('#comTypeAndPropertyTree').treegrid('beginEdit', rowIndex);
- lastIndex = rowIndex;
- }
- }
- ,onBeforeEdit:function(row){
- beforEditRow(row);//这里是功能实现的主要步骤和代码
- }
- ,onAfterEdit:function(row,changes){
- var rowId = row.id;
- $.ajax({
- url:"saveProductConfig.action" ,
- data: row,
- success: function(text){
- $.messager.alert('提示信息',text,'info');
- }
- });
- }
- });
- });
- function beforEditRow(row){//这个是核心的,很有用的,如有同样需求的话可以借鉴实现
- var libraryCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','library');
- var exposeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','expose');
- var annotateCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','annotate');
- var loadCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','load');
- var nameAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','nameAvailable');
- var valueAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','valueAvailable');
- var exportAsOATCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','exportAsOAT');
- var requiredCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','required');
- var unitsCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','units');
- var vmCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','vm');
- var typeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','type');
- var checkboxOptionsObj = new Object();
- checkboxOptionsObj.on='1';
- checkboxOptionsObj.off='0';
- var checkboxEditorObj = new Object();
- checkboxEditorObj.type='checkbox';
- checkboxEditorObj.options=checkboxOptionsObj;
- var comboboxOptionsObj = new Object();
- comboboxOptionsObj.valueField='typeId';
- comboboxOptionsObj.textField='typeName';
- comboboxOptionsObj.data=types;
- var comboboxEditorObj = new Object();
- comboboxEditorObj.type='combobox';
- comboboxEditorObj.options=comboboxOptionsObj;
- if(row.leaf){
- libraryCoclum.editor=null;
- exposeCoclum.editor=checkboxEditorObj;
- annotateCoclum.editor=checkboxEditorObj;
- loadCoclum.editor=checkboxEditorObj;
- nameAvailableCoclum.editor=checkboxEditorObj;
- valueAvailableCoclum.editor=checkboxEditorObj;
- exportAsOATCoclum.editor=checkboxEditorObj;
- requiredCoclum.editor=checkboxEditorObj;
- unitsCoclum.editor='text';
- vmCoclum.editor='text';
- typeCoclum.editor=comboboxEditorObj;
- }else{
- libraryCoclum.editor=checkboxEditorObj;
- exposeCoclum.editor=null;
- annotateCoclum.editor=null;
- loadCoclum.editor=null;
- nameAvailableCoclum.editor=null;
- valueAvailableCoclum.editor=null;
- exportAsOATCoclum.editor=null;
- requiredCoclum.editor=null;
- unitsCoclum.editor=null;
- vmCoclum.editor=null;
- typeCoclum.editor=null;
- }
- }
- 实现效果图:实现流程:onDblClickRow --( onBeforeEdit -- onAfterEdit) -- onClickRow,操作上只需要双击和单击两个事件来完成操作,而另两个事件是在中间自动实现完成。
jquery easyui treegrid使用小结
最新推荐文章于 2021-04-12 18:48:12 发布