最近项目是采用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");