Jquery+EasyUi常用代码

1、点击事件

jsp：

			<input type="button" id="feeSendFinanceInput_createBtn" class="btn" value="手动新增" >
			<input type="button" id="feeSendFinanceInput_searchBtn" class="btn" value="查询">

js：

	//新增
	$('#feeSendFinanceInput_createBtn').on('click',function(){
    
    
		createNewTask();
	});

	//搜索
	$('#feeSendFinanceInput_searchBtn').on('click',function(){
    
    
		loadfeeSendFinanceInput(1);
	});
	

实现点击淡入div，再次点击淡出div

<div class="opension-form"  id="psa_search_form" style="display: none;">
		<div class="opension-form-ele-2">
			<span class="opension-form-label-l">年金类型</span>
			<input id="feeSendFinanceInputDetail_ProductType" value="" data-options="prompt:'请选择'" class="easyui-combobox opension-txt">
		</div>
</div>

<input type="button" id="psa_advancedSearchBtn" class="opension-btn" value="高级搜索">

实时查询：

	//combobox下拉框
	$("#dailyMon_TaskSystem").combobox({
    
    
		onSelect:function(req){
    
    
			$("#dailyMon_Query").click();
		}
	});
	//datebox日期框
	$("#dailyMon_DailyDate").datebox({
    
    
		// startDate : 'UnifyPlanProcessQuery_MakeDateS',
		// endDate : '',
		onChange : function(newVal,oldVal){
    
    
			$("#dailyMon_Query").click();
		}
	});
	//input输入框
	$("#dailyMon_DailyGuys").bind("input propertychange",function(){
    
    
		$("#dailyMon_Query").click();
	});

//高级搜索
	$("#psa_advancedSearchBtn").on('click',function(){
    
    
		if($("#psa_search_form").is(":hidden")){
    
    
			$("#psa_search_form").slideDown();
		}else {
    
    
			$("#psa_search_form").slideUp();
		}
	});

---

2、字符串日期转为指定格式或Date类型

//把日期以-隔开的字符串转换为日期格式
function strDateForDate(str){
    
    
	var strDatepart;
	var dtDate;
	if(str != undefined){
    
    
		var strDate = str.split(" ");
		strDatepart = strDate[0].split("-");
		var dd = parseInt(strDatepart[1],10)-1;
		if(strDatepart[1] != '1'){
    
    
			dtDate = strDatepart[0]+"-"+dd.toString()+"月";
		}else{
    
    
			dtDate = strDatepart[0]+"-12月";  //指定格式的字符串日期
		}
		// dtDate = new Date(strDatepart[0],strDatepart[1]-1,strDatepart[2]);  //日期格式
	}else{
    
    
		return str;
	}
	return dtDate;
}

---

3、通过easyUi列表中的数据使其变色

//调用方法
function changeText(val,item,rowIndex) {
    
    
	var style = "";
	var title = "";

	var TaskStartDate = item.TaskStartDate;   //起始时间
	var TaskEndDate = item.TaskEndDate;  //结束时间

	var today = new Date();
	var ThreeDay = getDateTime();
	var startDate;
	var endDate;
	if(TaskStartDate != undefined){
    
    
		startDate = strDateForDate(TaskStartDate);
		endDate= strDateForDate(TaskEndDate);

		// console.log("开始时间："+startDate);

		startDate.setTime(startDate.getTime()-3*24*60*60*1000);
	}
	var ss = myformatter(ThreeDay);
	var threeDay = strDateForDate(ss);

	var dd = myformatter(today);
	var thisDay = strDateForDate(dd);

	// console.log("开始时间的前三天："+startDate);
	// console.log("结束时间："+endDate);
	// console.log("今天："+thisDay);
	// console.log("前三天："+threeDay);

	if (startDate != undefined && val != undefined && !isNull(val)) {
    
    

		if (startDate <= thisDay && thisDay <= endDate) {
    
    

			if (val.indexOf("已") >= 0 || val.indexOf("完成") >= 0 || val.indexOf("通过") >= 0) {
    
    
				// style+="color: green;";
				style += "background-color: #00ee00;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("未") >= 0 || val.indexOf("中") >= 0) {
    
    
				style += "background-color: rgb(231,45,45);color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("Task") >= 0) {
    
    
				style += "";
			} else {
    
    
				// style+="color: red;";
				style += "background-color: blue;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			}
		} else if (thisDay > endDate) {
    
    
			if (val.indexOf("已") >= 0 || val.indexOf("完成") >= 0 || val.indexOf("通过") >= 0) {
    
    
				// style+="color: green;";
				style += "background-color: #00ee00;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("未") >= 0) {
    
    
				title="超时";
				style += "background-color: blueviolet;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("中") >= 0) {
    
    
				title="超时";
				style += "background-color: blueviolet;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("Task") >= 0) {
    
    
				style += "";
			} else {
    
    
				// style+="color: red;";
				title="超时";
				style += "background-color: blueviolet;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			}
		} else if (thisDay < startDate) {
    
    
			if (val.indexOf("已") >= 0 || val.indexOf("完成") >= 0 || val.indexOf("通过") >= 0) {
    
    
				// style+="color: green;";
				style += "background-color: #00ee00;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("未") >= 0) {
    
    
				style += "background-color: Grey;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("中") >= 0) {
    
    
				style += "background-color: red;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			} else if (val.indexOf("Task") >= 0) {
    
    
				style += "";
			} else {
    
    
				// style+="color: red;";
				style += "background-color: blueviolet;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			}
		} else {
    
    
			// style+="background-color: rgb(231,45,45);color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
			style += "";
		}


	} else {
    
    
		val = '';
		// style+="background-color: rgb(231,45,45);color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		style += "";
	}





	/*if(val!= undefined && !isNull(val)){
		if(val.indexOf("已") >= 0 || val.indexOf("完成") >= 0 || val.indexOf("通过") >= 0){
			// style+="color: green;";
			style+="background-color: #00ee00;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		}else if(val.indexOf("未") >= 0){
			style+="background-color: Grey;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		}else if(val.indexOf("中") >= 0){
			style+="background-color: rgb(231,45,45);color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		}else if(val.indexOf("Task") >= 0){
			style+="";
		}else{
			// style+="color: red;";
			style+="background-color: blue;color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		}
	}else{
		val='';
		// style+="background-color: rgb(231,45,45);color: white;font-weight: bold;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;padding-right: 10px";
		style+="";
	}*/
	return "<span style='"+style+"' title='"+title+"'>"+val+"</span";

}

//获取日期
function getDateTime() {
    
    
	//前三天的时间
	var day1 = new Date();
	day1.setTime(day1.getTime()-3*24*60*60*1000);
	var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();
	//今天的时间
	var day2 = new Date();
	day2.setTime(day2.getTime());
	var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
	//明天的时间
	var day3 = new Date();
	day3.setTime(day3.getTime()+24*60*60*1000);
	var s3 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
	//拼接时间
	// function show(){
    
    
	// 	     var str = "" + s1 + "至" + s2;
	// 	     return str;
	// }
	// //赋值doubleDate
	//  $('#dateS').val(show());
	return day1;
}

//把日期以-隔开的字符串转换为日期格式
function strDateForDate(str){
    
    
	var strDatepart;
	var dtDate;
	if(str != undefined){
    
    
		var strDate = str.split(" ");
		strDatepart = strDate[0].split("-");
		dtDate = new Date(strDatepart[0],strDatepart[1]-1,strDatepart[2]);
	}else{
    
    
		return str;
	}
	return dtDate;
}

//时间转换标准格式的字符串
function myformatter(date){
    
    
	var y = date.getFullYear();
	var m = date.getMonth()+1;
	var d = date.getDate();
	return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}

---

4、input输入框、combobox下拉框（单选和多选）、datebox日期框设置清空、赋值、只读

清空：

	$('#tmd_TaskName').val('');
    $('#tmd_DailyOwnProject').combobox('setValue','');
    $('#tmd_AnalysisEndDate').datebox('setValue','');

赋值：

    $('#tmd_TaskName').val(taskName);
    $('#tmd_DailyOwnProject').combobox('setValue',data.items[0].DailyOwnProject);
    $('#tmd_AnalysisEndDate').datebox('setValue',data.items[0].AnalysisEndDate);

只读：

//需要注意的是，需要先赋值再进行设置只读属性，不然输入框会不生效
	$('#tmd_TaskName').attr('readonly',true);
	$('#tmd_DailyOwnProject').combobox({
    
    readonly:true});
	$('#tmd_AnalysisEndDate').datebox({
    
    readonly:true});

combobox下拉框设置多选

//1、在初始化下拉框的时候，设置可多选的属性multiple为true
				$('#tmd_TestDPose').combobox({
    
    
                        editable: false,// 不能直接输入到列表框
                        data: opts,
                        valueField: 'CodeName',
                        textField: 'CodeName',
                        panelHeight: 75,
                        multiple: true,  //设置多选
                        onShowPanel: function () {
    
    
                            var v = $(this).combobox('panel')[0].childElementCount;
                            // 判断下拉框高度（如果下拉框的数值小于10个，那么下拉框高度自动显示，如果大于10个，下拉框高度最高200）
                            if (v <= 10) {
    
    
                                $(this).combobox('panel')
                                    .height("auto");
                            } else {
    
    
                                $(this).combobox('panel')
                                    .height(200);
                            }
                        },
						onSelect: function (newValue, oldValue) {
    
    
                        }
                    });
//2、取值使用getValues获取多个值，以逗号“，”隔开
$('#tmd_TestDPose').combobox('getValues').toString()；

//3、赋值，从数据库获取数据，字符串以逗号隔开
$('#tmd_TestDPose').combobox('setValues',TestDPose.split(','));  //多个值，以逗号分隔进行赋值

---

5、关闭弹出的窗口

//首先需要获取窗口的id
$('#'+$('#subpage_window_id').val()).dialog("close");

---

6、easyui列表添加子列表

说明：
1、在父列表中添加subGridInitFunc : initChildList,//加载子mmgrid列表
2、定义子列表函数function initChildList(parentObj,gridObj,pageObj,itemUn)

//本周任务
function monWorkCell(){
    
    
	var cols = [
		{
    
    title : '操作',name : '',width : 70,align : 'center',sortable : true,renderer:operationmonDeal},
		{
    
    title : '任务编号',name : 'TaskNo',width : 70,align : 'center',sortable : true}
	];
	var mmgridAutoHeight; //自适应高度
	var pageLimitList; 	  //页面加载条数
	if(pageAutoHeight>660){
    
    
		mmgridAutoHeight = (pageAutoHeight-150);
		pageLimitList = 50;
	}else if(pageAutoHeight<650){
    
    
		mmgridAutoHeight = (pageAutoHeight-150);
		pageLimitList = 50;
	}
	MonWorkCell_Grid = $('#mon_WorkCell').mmGrid({
    
    
		height : mmgridAutoHeight,
		cols : cols,
		url : basePath+"public.asp",
		method : "post",
		root: 'items',
		params : monGridParms,
		sortName : '',
		sortStatus : 'desc',
		noDataText : '没有查到数据',
		indexCol : false,
		multiSelect : false,  //设置列表多选的属性 true为多选
		checkCol : false, //设置列表复选选的属性 true为可复选
		fullWidthRows : true,
		autoLoad : true,  //自动加载
		nowrap : true,
		subGridPageEnable : true,
		subGridEnable : true,
		subGridInitFunc : initChildList,//加载子mmgrid列表
		plugins : [ $('#mon_PgDetail').mmPaginator({
    
    //列表分页
			style : 'plain',
			totalCountName : 'totalCount',
			page : 1,
			pageParamName : 'currentPage',// 传递给后台当前第几页的参数名称
			limitParamName : 'pageSize',// 传递给后台每页记录数的参数名称
			limitLabel : '每页{0}条',
			totalCountLabel : '共<span>{0}</span>条记录',
			limit : 50,
			limitList : [ 5, 10, 15, 20, 50, 200 ]
		}) ]
	});
	MonWorkCell_Grid.on('loadSuccess',function(e,data){
    
    
	});
}
//个人任务池ajax的参数
function monGridParms(){
    
    
	//参数获取
	var param = {
    
    
		funcId : "find1",
		flag : "curr"
	};
	return param;
}
//子任务
function initChildList(parentObj,gridObj,pageObj,itemUn){
    
    
	var cols = [
		{
    
    title : '操作',name : 'Cz',width : 70,align : 'center',sortable : true,renderer:
				function(val,item){
    
    
						var itemUnjson= JSON.stringify(item);
						return "<a href='javascript:void(0)' title='查看' οnclick='return updateChildTask("+itemUnjson+");'>查看</a>&nbsp;\&nbsp;\&nbsp;";
				}},
		{
    
    title : '子任务名称',name : 'TaskName',align : 'center',width : 350,sortable : true}

	];
	var mmgridAutoHeight; //自适应高度
	var pageLimitList; //页面加载条数
	if(pageAutoHeight>660){
    
    
		mmgridAutoHeight = pageAutoHeight-230;
		pageLimitList = 50;
	}else if(pageAutoHeight<650){
    
    
		mmgridAutoHeight = pageAutoHeight-170;
		pageLimitList = 50;
	}
	ProgramcaseList_Grid = $(gridObj).mmGrid({
    
    
		height : 'auto',
		width : 'auto',
		cols : cols,
		url : basePath+"public.asp",
		method : "post",
		params : function(){
    
    
			//参数获取
			var param = {
    
    
				funcId : "fin2",
				TaskManagerNo : itemUn.TaskManagerNo
			};
			return param;
		},
		noDataText : '没有查到数据',
		indexCol : false,
		multiSelect : false,
		checkCol : false,
		nowrap:true,
		fullWidthRows : true,
		autoLoad : true,
		parentGrid : parentObj,
		plugins : [ $(pageObj).mmPaginator({
    
    
			style          : 'plain',
			totalCountName : 'totalCount',
			page           : 1,
			pageParamName  : 'currentPage',//传递给后台当前第几页的参数名称
			limitParamName : 'pageSize',//传递给后台每页记录数的参数名称
			limitLabel     : '每页{0}条',
			totalCountLabel: '共<span>{0}</span>条记录',
			limit          : 50,
			limitList      : [5,10,15, 20, 50, 200]
		}) ]
	});
}

---

持续更新。。。

author:su1573