easyui的datagrid可编辑框小功能实例

最近写了个小功能，备忘。

功能一实现效果：

1.js代码


/*** 其它费用设置* @return* @author ls* @time 2019.04.15*/
var otherYhbh;
var otherCnq;
function otherCostSettings() {var userNode = frames['threeModel'].$("#topUserList").datagrid("getSelected");if (!userNode) {pubAlertMessage( {"msg" : "请选择用户信息!","type" : BDXC_ALERT_TYPE.INFO});return;}var jmjsNode = frames['threeModel'].$("#middleJsList").datagrid("getSelected");if (!jmjsNode) {pubAlertMessage( {"msg" : "请选择一条历年费用!","type" : BDXC_ALERT_TYPE.INFO});return;}if (jmjsNode.qtsfje>0) {pubAlertMessage( {"msg" : "该户其它费用存在收费，请先删除其它费用收费，再重设其它费用!","type" : BDXC_ALERT_TYPE.INFO});return;}otherYhbh = jmjsNode.yhbh;otherCnq = jmjsNode.cnq;/*if (!otherYhbh) {alert("请在居民信息中选择要交费的用户信息");return;}*/if (!otherCnq) {alert("请在历年费用信息中选择要交费的费用信息");return;}var postData = {"jmsf.yhbh" : otherYhbh,"jmsf.cnq" : otherCnq};var paramJson = {"winDivId" : "otherCostWin","title" : "其它费用设置","width" : 750,"height" : 570,"iconCls" : "icon-edit","inDivId" : "addOtherCost","defineFun" : "addOtherCostSave();","loadUrl" : "UserPayAction!addOtherCost.action","postData" : postData,"watingTime" : 100,"initFunc": "getotherCostList()"};pubLoadWinPage(paramJson);
}
/*** 保存其它费用设置信息* @return* @ls*/
function addOtherCostSave(){var result = validateGrid();if(result){//保存其它费用设置var rows = $('#otherCostList').datagrid('getRows');var entitiesArray = [];for(i = 0;i < rows.length;i++){if( typeof(rows[i].fymc)!="undifined" && rows[i].fymc != null && rows[i].fymc != ''&& rows[i].sl>0){entitiesArray.push(JSON.stringify(rows[i]));}}$.ajax({url: "UserPayAction!addOtherCostSave.action",type: "post",async: true,dataType: 'json',data: {'otherCostEntities': entitiesArray.join('&'),'otherCostVo.yhbh': $("#yhbh").val(),'otherCostVo.cnq': $("#cnq").val()},success: function (data) {if(data.bdxc_return_status){alert(data.bdxc_return_msg);}else{alert(data.bdxc_return_msg);return;}$("#otherCostWin").window("close");frames['threeModel'].$("#middleJsList").datagrid("reload");}});}else {$.messager.alert('提示：','数据验证失败,请检查！','info');}
}
/*** 数据校验* @return* @ls*/
function validateGrid(){var result = true;var rows = $("#otherCostList").datagrid("getRows");$.each(rows, function(index,rows){result = $("#otherCostList").datagrid("validateRow", index);$('#otherCostList').datagrid('endEdit', index);//关闭行编辑if(!result){return false;}})return result;
}
/*** 加载费用信息* @return* @ls*/
function getotherCostList() {var frozenJson = [ [{field : "cz",title : "操作",width : 50,align : "center",editor : 'html',formatter : function(value, rowData, rec) {return '<a herf="javascript:void(0)" onclick="delRowsToOtherCostList();"><font color="red">移除</font></a>';}}, {field : "bh",title : "编号",width : 80,align : "center",hidden: true}, {field : "yhbh",title : "用户编号",width : 80,align : "center",hidden: true}, {field : "fymc",title : "费用名称",width : 150,align : "center",editor:{type:'combobox',options:{url:'DataAction!getTypeList.action?name=QTFYLX',valueField:'MC',editable:false,textField:'MC',required:true,onLoadSuccess: function () {$(this).combobox('setValue', tmpRowData.fymc);},panelHeight:'auto'}}}, {field : "cnq",title : "采暖期",width : 80,align : "center",hidden: true} ] ];var columnsJson = [ [ {field : "jslx",title : "计算类型",width : 150,align : "center",editor:{type:'combobox',options:{url:'DataAction!getTypeList.action?name=QTFYJSLX',valueField:'MC',editable:false,textField:'MC',required:true,onLoadSuccess: function () {$(this).combobox('setValue', tmpRowData.jslx);},panelHeight:'auto'}}}, {field : "sl",title : "数量",width : 120,align : "center",editor:{type:'numberbox',options:{/*editable:true,*/required:true,min:0,precision:2,panelHeight:'auto'}}},{field : "djlb",title : "单价类别",width : 140,align : "center",editor:{type:'combobox',options:{url:'DataAction!getTypeList.action?name=QTFYDJLB',valueField:'MC',editable:false,textField:'MC',required:true,onLoadSuccess: function () {$(this).combobox('setValue', tmpRowData.djlb);},panelHeight:'auto'}}},{field : "dj",title : "单价",width : 60,align : "center",editor:{type:'numberbox',options:{disabled:true,required:true,panelHeight:'auto'}}}]];var toolbar = [{iconCls: 'icon-add',text : '增加',handler: function(){$('#otherCostList').datagrid('appendRow',{//给用户编号和采暖期赋值yhbh: $("#yhbh").val(),cnq: $("#cnq").val()});}}];var postData = {"otherCostVo.yhbh" : otherYhbh,"otherCostVo.cnq" : otherCnq};var paramJson = {"id" : "otherCostList","fit" : false,"rownumbers" : true,"pagination" : false, "nowrap" : true,"striped" : true,"singleSelect" : true,"postData" : postData,"toolbar":toolbar,"url" : "UserPayAction!getOtherCostList.action","frozenColumns" : frozenJson,"columns" : columnsJson,"onClickFun":function(index,row){startOtherCostListEditor(index,row);}/*"onLoadSuccess" : addOtherCostDatagridEditor*/};pubInitDatagrid(paramJson);
}/*** 移除费用信息* @return* @ls*/
function delRowsToOtherCostList(){window.setTimeout(function(){var row = $("#otherCostList").datagrid("getSelected");var index = $("#otherCostList").datagrid("getRowIndex",row);$("#otherCostList").datagrid("deleteRow",index);});
}//定义行编辑全局变量
var editRow = undefined; //当前编辑的行
var tmpRowData = undefined;//临时数据
/*** 开启表格编辑器* @param index* @param row* @return* @ls*/
function startOtherCostListEditor(index,row){var gridObj = $('#otherCostList');//记录初始数据var Rows = gridObj.datagrid("getRows");tmpRowData = Rows[index];//结束之前的行编辑if(editRow != undefined){gridObj.datagrid("endEdit", editRow);}//开启行编辑gridObj.datagrid('acceptChanges');//结束编辑事件gridObj.datagrid('beginEdit',index);//获取行编辑editRow = index;var sl =gridObj.datagrid('getEditor',{index:index,field:'sl'});var jslx =gridObj.datagrid('getEditor',{index:index,field:'jslx'});var jslxValue = $(jslx.target).combobox("getValue");validatejslx(sl, jslxValue);//计算类型触发事件-获取面积$(jslx.target).combobox({onChange:function(newValue, oldValue){    canEdit(newValue,oldValue);}}); //单价类别触发事件-获取单价var djlb =gridObj.datagrid('getEditor',{index:index,field:'djlb'});var dj =gridObj.datagrid('getEditor',{index:index,field:'dj'});$(djlb.target).combobox({onChange:function(newValue, oldValue){    $.ajax({url:"DataAction!getFixedPrice.action",type:"post",async:false,data:{"djlb":newValue,"cnq":$("#cnq").val()},success:function(data){$(dj.target).numberbox('setValue',data);}});}});  //费用名称触发事件-不可重复var fymc =gridObj.datagrid('getEditor',{index:index,field:'fymc'});$(fymc.target).combobox({onChange:function(newValue, oldValue){   $.each(Rows, function(i,Rows){if(i!=index){if(Rows.fymc==newValue){alert("该费用信息已存在,不可重复设置");$(fymc.target).combobox('setValue',tmpRowData.fymc);}}});}});}
/*** 计算类型触发事件* @param newValue* @param oldValue* @return* @ls*/
function canEdit(newValue,oldValue){var gridObj = $('#otherCostList');var row = gridObj.datagrid('getSelected');var index = gridObj.datagrid('getRowIndex',row);var comboboxObj =gridObj.datagrid('getEditor',{index:index,field:'sl'});validatejslx(comboboxObj, newValue);
}
/*** 根据计算类型更改数量值* @param sl* @param newValue* @return* @ls*/
function validatejslx(sl, newValue){getZmjByYhbh();var sfmj = $("#sfmj").val();if(newValue == '按面积计算'){//   $(sl.target).numberbox("disable",true);
//      $(sl.target).numberbox("textbox").css("background-color","#F5F5F5");/*$(sl.target).numberbox("disableValidation");$(sl.target).numberbox("clear")*/$(sl.target).numberbox("setValue",sfmj);$(sl.target).numberbox({min:0});}else{$(sl.target).numberbox("enable",false);$(sl.target).numberbox("setValue",1);$(sl.target).numberbox({min:1});
//      $(sl.target).numberbox("textbox").css("background-color","");/*$(sl.target).numberbox("enableValidation");*/}
}
/*** 获取用户总面积* @return* @ls*/
function getZmjByYhbh(){var yhbh = $("#yhbh").val();$.ajax({type:"post",async:false,url:'UserPayAction!getSfmj.action',data:{"jmsf.yhbh":yhbh},success:function(data){$("#sfmj").val(data);}});
}

2. sf_otherCost_add.jsp：

<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%String p = request.getContextPath();String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+p+"/";
%>
<form action="UserPayAction!addOtherCostSave.action" id="addOtherCostForm" method="post"><s:token></s:token><input type="hidden" id="expenseInfoStr" name="jmsf.expenseInfoStr" /><input type="hidden"  id="yhbh" value="<s:property value="jmyh.yhbh"/>"/><input type="hidden"  id="cnq"  value="<s:property value="jmjs.cnq"/>"/><input type="hidden"  id="sfmj"  />
<div style="height:98%;width:98%" id="costListDiv">
<table id="otherCostList" >
</table>
</div>
</form>

功能二实现效果（点击链接，查看具体详情）：

1. js代码：

function showQtfyDetail(data){debugger;var array = data.split(",");var yhbh = array[0];var cnq = array[1];$('<div></div>').dialog({title: '其它费用信息',id:'qtfyDialog',width: 850,height: 500,iconCls:'icon-save',maximizable:false,//定义是否显示最大化按钮resizable:false,//定义是否可以改变对话框窗口大小。collapsible:false,//定义是否显示可折叠按钮closable:true,//定义是否显示关闭按钮closed: false,//定义是否可以关闭窗口cache: false,href: '../sf_threeModel/sf_qtfy_detail.jsp',/*content:'<iframe id="detailInfo" src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>',*/queryParams:{'yhbh':yhbh,'cnq':cnq},modal: true,buttons: [{text:'确定',iconCls:'icon-ok',handler:function(){$("#qtfyDialog").dialog('destroy');}},{text:'取消',iconCls:'icon-cancel',handler:function(){ $("#qtfyDialog").dialog('destroy');}}],             onLoad:function(){},onClose:function(){$("#qtfyDialog").dialog('destroy');}});}

2.jsp页面sf_qtfy_detail.jsp：

注意：table标签外别忘了加div

<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/include.jsp"%>
<html>
<head></head>
<body><div style="width:98%;height:98%"  ><table class="easyui-datagrid"  id="otherCost_detail" ></table> </div>
<script type="text/javascript">
$(function() {//子jsp页面获取值 并放入到input框中var yhbh = $('#qtfyDialog').dialog('options')["queryParams"]["yhbh"];  var cnq = $('#qtfyDialog').dialog('options')["queryParams"]["cnq"]; var frozenJson = [[{field:'bh',title:'编号',width:200,hidden: true},{field:'yhbh',title:'用户编号',width:100,hidden: true},{field:'cnq',title:'采暖期',width:100},{field:'fymc',title:'费用名称',width:120},{field:'ysje',title:'应收金额',width:100},{field:'sfje',title:'收费金额',width:100},{field:'qfje',title:'欠费金额',width:100},]];var columnsJson = [[                {field:'yjje',title:'预交金额',width:100,hidden: true},{field:'zkje',title:'折扣金额',width:100,hidden: true},{field:'hjje',title:'核减金额',width:100,hidden: true},{field:'jslx',title:'计算类型',width:100},{field:'djlb',title:'单价类别',width:120},{field:'dj',title:'单价',width:100},{field:'sl',title:'数量',width:100},]];var postData = {"otherCostVo.yhbh" : yhbh,"otherCostVo.cnq" : cnq};var paramJson = {"id" : "otherCost_detail","fit" : false,"rownumbers" : true,"pagination" : false, "nowrap" : true,"striped" : true,"singleSelect" : true,"postData" : postData,"url" : "UserPayAction!getOtherCostList.action","frozenColumns" : frozenJson,"columns" : columnsJson,};pubInitDatagrid(paramJson);
});
</script></body>
</html>

easyui的datagrid可编辑框小功能实例相关推荐

tkinter文本框小功能（6）：锚点
tkinter文本框小功能(6):锚点引言添加标识添加锚点 python层面 Tin层面结语引言锚点之一概念在文本浏览中很常见,那就是在同一页面的文本内容在,添加一个锚点标识符,指向一个确 ...
EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件
有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = ...
flex中dataGrid的编辑功能
在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1.datagrid编辑功能简介当我们点 ...
flex中dataGrid的编辑功能精华
from:http://blog.csdn.net/wuyan520/article/details/5469794 也是转载,源头未知. 在flex的dataGrid中,很多情况下列是需要嵌入其他的 ...
easyui数据表格显示复选框_EasyUI DataGrid 复选框
使用checkbox,用户可以选定/取消数据行. 添加checkbox列,我们简单的添加列的checkbox属性,并且设置为true.代码像这样: $('#tt').datagrid({ title: ...
VC++ 单文档的状态栏编程、CEditView类实现编辑器功能、编辑框显示行号列号
Win10 企业版:VC6: 新建一个单文档工程:默认的视图类的基类是CView:选择CEditView类作为,看一下生成的效果: 构建一下:运行:以CEditView作为基类,生成的应用程序具有编辑 ...
文本编辑器中实现自定义编辑框中字体和大小的功能
文章目录 1 文本编辑器中实现自定义编辑框中字体和大小的功能 1 文本编辑器中实现自定义编辑框中字体和大小的功能实现思路: 通过QFontDialog选择字体及大小. 将QFont对象设置到文本编辑 ...
拨号应用Dialer，更改默认fragment为通话记录。上下左右按键遇到edittext编辑框后继续原来的功能选择。关闭相机录像快门声音，避免快门声音录像录进。
拨号应用Dialer,更改默认fragment为通话记录: vendor/mediatek/proprietary/packages/apps/Dialer/java/com/android/dial ...
Android每日源码，微博编辑框ProgressDialog加载“到位”功能流动布局快递小说app
1.支持类似微博的编辑框,可输入表情和@某人 2.自定义ProgressDialog加载提醒 3.快速开发偷懒必备(二) 支持DataBinding啦~爽炸,花式列表一... 4.利用百度地图快速实现 ...

easyui的datagrid可编辑框小功能实例

easyui的datagrid可编辑框小功能实例相关推荐

最新文章

热门文章