EasyUI在項目中的相關使用

最近項目是採用Easyui作爲前端頁面，正好此次前端頁面由我來編寫，在這總結部分使用方法及技術，同時還有相關的JS控制代碼，在這裏只是實用技巧，如果需要更詳細的情況，需要去查看API文檔  http://www.jeasyui.net/

一、異步樹

<table id="peopleGrid" style="height: 100%;"></table>
		$('#moduleTree').tree({
    		    	url: contextPath +'/', //URL地址
    		    	loadFilter: function(rows){
    		    		return convert(rows);
    		    	},
    		    	onBeforeExpand: function(node){  
    		        if(node){  
    		            	$('#moduleTree').tree('options').url = contextPath + "/" + node.id;    
    		        	}  
    		    	},
    		    	onDblClick: function(node){
    		    		//獲取節點後給相應的文本框賦值
    		    		areaID = node.id
			    		
    		    	}
    		    });

	function convert(rows){
		function exists(rows, parentDeptCode){
    		for(var i=0; i<rows.deptList.length; i++){
    			if (rows.deptList[i].deptCode == parentDeptCode) return true;
    		}
    		return false;
    	}
    	var nodes = [];
    	// get the top level nodes
    	for(var i=0; i<rows.deptList.length; i++){
    		var row = rows.deptList[i];
    		if (!exists(rows, row.parentDeptCode)){
    			nodes.push({
    				id:row.deptCode,
    				text:row.deptName,
    				state:'closed'
    			});
    		}
    	}
    	var toDo = [];
    	for(var i=0; i<nodes.length; i++){
    		toDo.push(nodes[i]);
    	}
    	while(toDo.length){
    		var node = toDo.shift();	// the parent node
    		// get the children nodes
    		for(var i=0; i<rows.deptList.length; i++){
    			var row = rows.deptList[i];
    			if (row.parentDeptCode == node.id){
    				var child = {id:row.deptCode,text:row.deptName,state:'closed'};
    				if (node.children){
    					node.children.push(child);
    				} else {
    					node.children = [child];
    				}
    				toDo.push(child);
    			}
    		}
    	}
    	return nodes;
    }

二、下拉框（此處寫的下拉框與API有些差別，我是採用AJAX異步提交的方式和下拉框組合實現）

//獲取組別下拉信息 
            $.ajax({  
	            type: "POST",  
	            url:contextPath +'/' , //url地址
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8", 
	            dataType : "json",  
	            success: function(data){ 
		            var listData = data;	
		            $("#updateSeatGroupName").combobox({
		            	valueField:'seatGroup',
		                textField:'seatGroupName',
		                value:selectDefault,
		                data:listData.groupList,
		                editable:false,
		                onSelect:function(record){
		                	seatGroupNo = record.seatGroup
		                	seatGroupName = record.seatGroupName
		                }
		             });
	            }  
	        });

三、單選按鈕默認選中

實例：initradio('status',status);
方法：
	//獲取單選按鈕默認選中
	function initradio(rName, rValue) {
		var rObj = document.getElementsByName(rName);
		for (var i = 0; i < rObj.length; i++) {
			if (rObj[i].value == rValue) {
				rObj[i].checked = 'checked';
			}
		}
	} 

四、JQ中控制文件框只讀

設置只讀      $("#updateSeatGroupName").attr({readonly: "true"});

 取消只讀      $("#updateSeatGroupName").removeAttr("readonly");