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

coderLee0607

已于 2024-02-22 11:39:01 修改

阅读量1.1k

点赞数

分类专栏： easy UI 文章标签： easyui okhttp 前端

于 2019-05-03 16:59:08 首次发布

本文链接：https://blog.csdn.net/ptsx0607/article/details/89788983

版权

easy UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

功能一实现效果：

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>

coderLee0607

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui的datagrid可编辑框小功能实例

最近写了个小功能，备忘。功能一实现效果：1.js代码/** * 其它费用设置 * @return * @author ls * @time 2019.04.15 */var otherYhbh;var otherCnq;function otherCostSettings() { var userNode = frames['threeModel'].$(...
复制链接

扫一扫

专栏目录