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 + ' '+ c + ' '+ d;
}else{
str = e + ' '+ 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 + ' '+ c + ' '+ d;
}else{
str = e + ' '+ 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但又不懂如何做的人员,可能参考一下源码JS。
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
最后,对于“easyui-datagrid-editor”这个压缩包文件,它可能包含了示例代码、样式文件或其他资源,帮助开发者理解并实现编辑状态下Datagrid列值的更新功能。如果需要进一步的帮助,可以查看该文件的内容或查阅...
### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...
### easyui的datagrid中editor和combogrid的结合使用 #### 一、easyui简介及datagrid功能概述 easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
在本文中,我们将深入探讨如何在EasyUI框架中实现datagrid editor中的combogrid搜索框。EasyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的组件,如datagrid、combogrid等,用于构建简洁且功能强大的Web应用...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
在“可编辑 datagrid 完整例子”中,EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持,filebox 是 EasyUI 的一个扩展,用于处理文件上传功能。 在标题和描述中提到的“可...
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。
在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...
easyUI拓展:获取当前datagrid中在编辑状态的行编号列表,直接使用即可
本文将详细介绍如何在easyUI的`datagrid`控件中通过自定义编辑器(editor)实现在一个单元格中放置多个输入控件。 #### 二、实现原理 在easyUI框架中,`datagrid`提供了编辑器功能来对表格中的单元格进行编辑操作...
在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...
根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...
在本文中,我们将深入探讨如何在EasyUI的DataGrid中创建自定义编辑器,特别是`colorpickerEditor`,用于在行内编辑时选择颜色。EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加...
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
### EasyUI Datagrid 编辑模式详解 #### 一、EasyUI Datagrid 概述 EasyUI 是一款基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 控件,包括 datagrid,可以方便地构建出复杂的数据展示表格。Datagrid 是 ...