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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章