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");