`
chun521521
  • 浏览: 283891 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

easyui datagrid editor

阅读更多

 

easyui版本为:jQuery EasyUI 1.4.1

尝试了2天,单最终因为删除行(新建的、原有的)后,datagrid对剩余行不重新修订行号,导致取消、保存无法正常使用,最后不得不放弃,转而使用ext。

但是2天的摸索,还是找到了不少好知识点,以兹共享,码农共勉!

 

 

 

0.扩展只读text

/* 扩展编辑器---只读文本框 */
$.extend($.fn.datagrid.defaults.editors, {
    textR: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input textbox textbox-text" readonly="readonly" style="width:89px;" >').appendTo(container);
            return input;
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            var input = $(target);
            if ($.boxModel == true){
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }
});

 

1.操作按钮

{field:'opt',title:'操作',width:100,align:'center',formatter: function(value,row,index){
          var str = '';
          var e = '<a href="javascript:void(0);" onclick="editData1('+index+')">编辑</a>';//编辑
          var s = '<a href="javascript:void(0);" onclick="saveData1('+index+')">保存</a>';//保存
          var c = '<a href="javascript:void(0);" onclick="cancleData1('+index+')">取消</a>';//取消
          var d = "<a href='javascript:void(0);' onclick='delData1("+index+","+JSON.stringify(row)+");'>删除</a>";//删除
          
          if(row.editing){
           str = s + '&nbsp;&nbsp;'+ c + '&nbsp;&nbsp;'+ d;
          }else{
           str = e + '&nbsp;&nbsp;'+ d;
          }
          return str;
         }},

 

2.combobox格式化、编辑、联动单元格赋值

{field:'spec',title:'规格',width:100,editor:'textR'},
{field:'unit',title:'单位',width:100,editor:'textR'},

{field:'feeName',title:'收费项目名称',width:100,
          formatter:function(value){
           for(var i=0; i<feeNameData.length; i++){ 
            if (feeNameData[i].feeId == value){
             return feeNameData[i].feeName; 
            }
           }
           return value; 
          },
          editor:{type:'combobox',options: {
           valueField:'feeId',textField:'feeName',data:feeNameData,required:true,
           onSelect:function(rec){
            var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
            $("tr[datagrid-row-index="+index+"] td[field=spec] input[type=text]").val(rec.spec);
            $("tr[datagrid-row-index="+index+"] td[field=unit] input[type=text]").val(rec.unit);
            $("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val(rec.price);
            $("tr[datagrid-row-index="+index+"] td[field=baoxianType] input[type=text]").val(rec.yibao);
           }
          }}
         },

 

3.增删改查

/**
 * 增加
 * @return
 */
function addData1(){
 $('#dataGrid1').datagrid('appendRow',blankRow);
}
/**
 * 编辑
 * @return
 */
function editData1(rowIndex){
 $('#dataGrid1').datagrid('beginEdit', rowIndex);
}
/**
 * 保存
 * @return
 */
function saveData1(rowIndex){
 $('#dataGrid1').datagrid('endEdit', rowIndex);
}
/**
 * 取消
 * @return
 */
function cancleData1(rowIndex){
 $('#dataGrid1').datagrid('cancelEdit', rowIndex);
}

/**
 * 删除
 * @return
 */
function delData1(index, row){

if(row.haiid == ''){

$('#dataGrid1').datagrid('deleteRow', rowIndex);
}else{

//ajax从库中删除

}

 

}

 

 4.整个表格代码

 
function init1(){
 $('#dataGrid1').datagrid({
  url:'',method:'post',
     queryParams: { hafid:'',types:'' },striped:true,
  method:'post',idField:'haiid',loadMsg:'数据加载中……',
  singleSelect:false,rownumbers:true,nowrap:true,//fit: true,
     pagination:true,pageSize:10,pageList:[10,20,50,100],
     columns:[[
            {field:'ck',checkbox:true},
         //haiid,status,types,feeName,spec,unit,price,nums,money,drugDose,drugFreq,drugCycle,drugNum,drugWay,baoxianType
         {field:'opt',title:'操作',width:100,align:'center',formatter: function(value,row,index){
          var str = '';
          var e = '<a href="javascript:void(0);" onclick="editData1('+index+')">编辑</a>';//编辑
          var s = '<a href="javascript:void(0);" onclick="saveData1('+index+')">保存</a>';//保存
          var c = '<a href="javascript:void(0);" onclick="cancleData1('+index+')">取消</a>';//取消
          //var d = "<a href='javascript:void(0);' onclick='delData1("+index+","+JSON.stringify(row)+");'>删除</a>";//删除
          
          if(row.editing){
           str = s + '&nbsp;&nbsp;'+ c + '&nbsp;&nbsp;'+ d;
          }else{
           str = e + '&nbsp;&nbsp;'+ d;
          }
          return str;
         }},
         {field:'haiid',title:'haiid',hidden:true},
         {field:'status',title:'医嘱状态',width:100,
          //1已保存/2已收款/3已发药/4已停止
          formatter:function(value){
           if(value == 1){
            return '已保存';
           }else if(value == 2){
            return '已收款';
           }else if(value == 3){
            return '已发药';
           }else if(value == 4){
            return '已停止';
           }
           return value;
          }
         },
         //1药品2诊疗
         {field:'types',title:'诊疗类型 ',width:100, formatter:function(value){ return '药品'; } },
         {field:'feeName',title:'收费项目名称',width:100,
          formatter:function(value){
           for(var i=0; i<feeNameData.length; i++){ 
            if (feeNameData[i].feeId == value){
             return feeNameData[i].feeName; 
            }
           }
           return value; 
          },
          editor:{type:'combobox',options: {
           valueField:'feeId',textField:'feeName',data:feeNameData,required:true,
           onSelect:function(rec){
            var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
            $("tr[datagrid-row-index="+index+"] td[field=spec] input[type=text]").val(rec.spec);
            $("tr[datagrid-row-index="+index+"] td[field=unit] input[type=text]").val(rec.unit);
            $("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val(rec.price);
            $("tr[datagrid-row-index="+index+"] td[field=baoxianType] input[type=text]").val(rec.yibao);
           }
          }}
         },
         {field:'spec',title:'规格',width:100,editor:'textR'},
         {field:'unit',title:'单位',width:100,editor:'textR'},
         {field:'price',title:'单价 ',width:100,align:'right',editor:'textR',
          formatter: function(value,row,index){ return RMBMoney(value); }
         },
         {field:'nums',title:'数量',width:100,align:'right',
          editor:{type:'numberbox',options: {min:0,max:999999,precision:2,onChange:function(newV,oldV){
           var index = $(this).parent().parent().parent().parent().parent().parent().parent()[0].rowIndex;
           var price = $("tr[datagrid-row-index="+index+"] td[field=price] input[type=text]").val();
           var money = newV * price;
           $("tr[datagrid-row-index="+index+"] td[field=money] input[type=text]").val(money);
          }}}
         },
         {field:'money',title:'金额',width:100,align:'right',editor:'textR',
          formatter: function(value,row,index){ return RMBMoney(value); }
         },
         {field:'drugDose',title:'用药剂量',width:100,
          editor:{type:'validatebox',options: {required:true,validType:'length[0,50]'}}
         },
         {field:'drugFreq',title:'用药频率',width:100,
          formatter:function(value){
           for(var i=0; i<pinlvData.length; i++){
         if (pinlvData[i].id == value){
          return pinlvData[i].name;
         }
           }
           return value;
          },
          editor:{type:'combobox',options: {valueField:'id',textField:'name',data:pinlvData,required:true,editable: false} }
         },
         {field:'drugCycle',title:'周期',width:100,
          formatter:function(value){
           for(var i=0; i<zhouqiData.length; i++){
         if (zhouqiData[i].id == value){
          return zhouqiData[i].name;
         }
           }
           return value;
          },
          editor:{type:'combobox',options: {valueField:'id',textField:'name',data:zhouqiData,required:true,editable: false} }
         },
         {field:'drugNum',title:'周期使用数量',width:100,align:'right',
          editor:{type:'validatebox',options: {required:true,validType:'length[0,50]'}}
         },
         {field:'drugWay',title:'给药方式',width:100,
          formatter:function(value){
           for(var i=0; i<geiyaoData.length; i++){
         if (geiyaoData[i].id == value){
          return geiyaoData[i].name;
         }
           }
           return value;
          },
          editor:{type:'combobox',options: {valueField:'id',textField:'name',data:geiyaoData,required:true,editable: false} }
         },
         {field:'baoxianType',title:'保险类别',width:100,editor:'textR'}
     ]],
     toolbar: [{
      text: '增加', iconCls: 'icon_add', handler: function(){ addData1(); }
     }],
  onLoadSuccess: function(data){
   $('#dataGrid1').datagrid('clearSelections');
  },
     onClickRow: function(rowIndex, rowData){
   
  },
  onDblClickRow: function(rowIndex, rowData){
   editData1(rowIndex);
  },
  onBeforeEdit:function(index,row){  
   row.editing = true;
   $('#dataGrid1').datagrid('refreshRow', index);
  },
  onAfterEdit:function(index,row){
   row.editing = false;
   $('#dataGrid1').datagrid('refreshRow', index);
  },
  onCancelEdit:function(index,row){
   row.editing = false;
   if(row.haiid == ''){
    $('#dataGrid1').datagrid('updateRow', {
     index: index,
     row: blankRow
    });
   }else{
    $('#dataGrid1').datagrid('updateRow', {
     index: index,
     row: row
    });
   }
  }
 });
}

 

分享到:
评论

相关推荐

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    easyui datagrid editor combogrid和combobox

    easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。

    easyui datagrid在编辑状态下更新列的值

    最后,对于“easyui-datagrid-editor”这个压缩包文件,它可能包含了示例代码、样式文件或其他资源,帮助开发者理解并实现编辑状态下Datagrid列值的更新功能。如果需要进一步的帮助,可以查看该文件的内容或查阅...

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

    easyui的datagrid中editor和combogrid的结合使用

    ### easyui的datagrid中editor和combogrid的结合使用 #### 一、easyui简介及datagrid功能概述 easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    简介EasyUI datagrid editor combogrid搜索框的实现

    在本文中,我们将深入探讨如何在EasyUI框架中实现datagrid editor中的combogrid搜索框。EasyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的组件,如datagrid、combogrid等,用于构建简洁且功能强大的Web应用...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    easyui 可编辑datagrid完整例子,支持filebox

    在“可编辑 datagrid 完整例子”中,EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持,filebox 是 EasyUI 的一个扩展,用于处理文件上传功能。 在标题和描述中提到的“可...

    jQuery Easyui datagrid editor为combobox时指定数据源实例

    当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。

    easyui DataGrid动态编辑

    在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...

    easyUI拓展:获取当前datagrid正在编辑状态的行编号

    easyUI拓展:获取当前datagrid中在编辑状态的行编号列表,直接使用即可

    datagrid中编辑状态(editor)下一列嵌入多个控件

    本文将详细介绍如何在easyUI的`datagrid`控件中通过自定义编辑器(editor)实现在一个单元格中放置多个输入控件。 #### 二、实现原理 在easyUI框架中,`datagrid`提供了编辑器功能来对表格中的单元格进行编辑操作...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    easyui datagrid 自定义编辑器 colorpickerEditor

    在本文中,我们将深入探讨如何在EasyUI的DataGrid中创建自定义编辑器,特别是`colorpickerEditor`,用于在行内编辑时选择颜色。EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加...

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...

    Easyui-datagrid编辑模式详解

    ### EasyUI Datagrid 编辑模式详解 #### 一、EasyUI Datagrid 概述 EasyUI 是一款基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 控件,包括 datagrid,可以方便地构建出复杂的数据展示表格。Datagrid 是 ...

Global site tag (gtag.js) - Google Analytics