Ext 实现动态拼Checkbox
今天心情不错，看了几个博问的列表，一时兴起将自己做过的一个通过Ext动态实现拼Checkbox的列子分享下：
要实现的效果如图：
下面开始操作：
1.新建一个a.aspx页面，在页面中引用上Ext必须得几个文件，如：
<link href="../Resource/Scripts/Common/Extjs/resources/css/ext-all.css" rel="Stylesheet"
type="text/css" />
<script src="../Resource/Scripts/Common/Extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Extjs/ext-all.js" type="text/javascript"></script>
然后在a.aspx页面上放置一个div用来安置拼出来的checkbox列表。
2.新建一个b.js文件，用来拼Checkbox列表，主要代码如下：
View Code
//按模板拼接界面
function GroupInterface() {
//合并总JOSN
var objData = {};
//列
var objCols = [];
if (objRole != undefined) {
for (var i = 0; i < objRole.length; i++) {
var cols = {};
cols.RoleID = objRole[i].Role_ID;
cols.RoleName = objRole[i].Role_Name;
cols.TempAuth = objRole[i].Role_Temp_Auth;
objCols.push(cols);
}
}
//行
var objRows = [];
if (objType != undefined || objRole != undefined) {
for (var j = 0; j < objType.length; j++) {
var rows = {};
rows.EnumCode = objType[j].EnumCode;
rows.EnumName = objType[j].EnumName;
var auths = [];
if (objManage == undefined || objManage.length <= 0) {
for (var y = 0; y < objRole.length; y++) {
var auth = {};
auth.TempAuth = objRole[y].Role_Temp_Auth;
auth.AllowAuthorize = 0;
auth.AllowDeferedAuth = 0;
auths.push(auth);
}
}
else if (objManage.length > 0) {
for (var y = 0; y < objRole.length; y++) {
var auth = {};
auth.TempAuth = objRole[y].Role_Temp_Auth;
var isauth = false; //是否授权
for (var k = 0; k < objManage.length; k++) {
if (objManage[k].RoleId.toLowerCase() == objRole[y].Role_ID.toLowerCase() && objType[j].EnumCode.toLowerCase() == objManage[k].AuthorizeType.toLowerCase()) {
auth.AllowAuthorize = objManage[k].AllowAuthorize;
auth.AllowDeferedAuth = objManage[k].AllowDeferedAuth;
isauth = true;
break;
}
}
if (!isauth) {
auth.AllowAuthorize = 0;
auth.AllowDeferedAuth = 0;
isauth = false;
}
auths.push(auth);
}
}
rows.Auths = auths;
objRows.push(rows);
}
}
objData = { cols: objCols, rows: objRows };
var tpl = new Ext.XTemplate(
'<table border="0" cellspacing="1" cellpadding="0" bgcolor="#EDEDED" style="width:100%;min-width:800px">',
'<tr class="color_1"><td style="background-color:#FAFAFA"> </td>',
'<tpl for="cols">',
'<tpl if="TempAuth == 0">',
'<td class="gridthed" style="text-align: center;height:24px;width:80px">{RoleName}</td>',
'</tpl>',
'<tpl if="TempAuth == 1">',
'<td class="gridthed" style="text-align: center;height:24px;width:200px" colspan="2">{RoleName}</td>',
'</tpl>',
'</tpl>',
'</tr>',
'<tr class="color_2"><td> </td>',
'<tpl for="cols">',
'<tpl if="TempAuth == 0">',
' <td class="gridthed" style="text-align: center;width: 80px;height:24px">授权</td>',
'</tpl>',
'<tpl if="TempAuth == 1">',
'<td class="gridthed" style="text-align: center;width:80px;height:24px">授权</td><td class="gridthed" style="text-align: center;width:120px">临时授权</td>',
'</tpl>',
'</tpl>',
'</tr>',
'<tpl for="rows">',
'<tr style="height:24px" class="{[xindex % 2 === 0 ? "color_2" : "color_1"]}">',
'<td style="text-align:left;width:200px;padding-left:10px">{EnumName}：</td>',
'<tpl for="Auths">',
'<tpl if="TempAuth == 0">',
'<tpl if="AllowAuthorize == 0 ">',
'<td class="gridthed" style="text-align: center;width:100px"><input id="{["cbx_allow_"+parent.EnumCode+"_"+xindex]}" type="checkbox" name="vehicle" /></td>',
'</tpl>',
'<tpl if="AllowAuthorize == 1 ">',
'<td class="gridthed" style="text-align: center;width:100px"><input id="{["cbx_allow_"+parent.EnumCode+"_"+xindex]}" checked type="checkbox" name="vehicle" /></td>',
'</tpl>',
'</tpl>',
'<tpl if="TempAuth == 1">',
'<tpl if="AllowAuthorize == 0 ">',
'<td class="gridthed" style="text-align: center;width:100px"><input id="{["cbx_allow_"+parent.EnumCode+"_"+xindex]}" type="checkbox" name="vehicle" /></td>',
'</tpl>',
'<tpl if="AllowAuthorize == 1 ">',
'<td class="gridthed" style="text-align: center;width:100px"><input id="{["cbx_allow_"+parent.EnumCode+"_"+xindex]}" checked type="checkbox" name="vehicle" /></td>',
'</tpl>',
'<tpl if="AllowDeferedAuth == 0 ">',
'<td class="gridthed" style="text-align: center;width:100px;"><input id="{["cbx_defered_"+parent.EnumCode+"_"+xindex]}" type="checkbox" name="vehicle" /></td>',
'</tpl>',
'<tpl if="AllowDeferedAuth == 1 ">',
'<td class="gridthed" style="text-align: center;width:100px"><input id="{["cbx_defered_"+parent.EnumCode+"_"+xindex]}" checked type="checkbox" name="vehicle" /></td>',
'</tpl>',
'</tpl>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
tpl.overwrite('grid-example', objData);
}
在这段代码中需要添加一个方法如：
//获取所需数据
function GetNeedData(dataType, jsonPar) {
var obj;
//通过AJAX请求数据 为 myData 变量赋值
Fix.Ajax.url = ''; //指定访问页面
Fix.Ajax.asyn = false; //同步AJAX提交
Fix.Ajax.JSON = 'type=getFiles&data=' + dataType + jsonPar; //提交参数
Fix.Ajax.success = function () {
obj = this.returnJSON; //回调函数
}
Fix.Ajax.execute(); //执行
return obj;
}
根据这个方法到相应的ashx页面中进行处理
3.在b.js中有Ajax的同步处理涉及到的Ajax响应页面，所以咱们要先新建一个一般处理程序文件c.ashx
ashx中的代码我就不附加了，因为附加了也没什么用，大体思路就是，在ashx页面中先接收到传递过来的参数，
然后自己写相应的方法，不过要将方法序列化成json格式的，然后Response.Write()到前台。
4.前台接收到到后台传递回来的Json数据，然后根据数据来设置页面中checkbox是否选中。
这样上述的效果就出来了，还是无刷新的哦，呵呵
