首页 新闻 会员 周边 捐助

新手请教jquery easui datagrid的问题

1
悬赏园豆:30 [已解决问题] 解决于 2011-12-26 20:25

请问在jquery easui datagrid中能不能做出如图所示的效果,就是把数据库里的一个bool值显示为复选框?

何小飞的主页 何小飞 | 初学一级 | 园豆:29
提问于:2011-12-26 11:52
< >
分享
最佳答案
1

可以的,通过Ext可以实现。

在Ext中你可以拼一个模板 然后根据模板添加数据,我这有个示例你可以研究下:

//按模板拼接界面
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">&nbsp;</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>&nbsp;</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);
}
收获园豆:30
JasonNET | 初学一级 |园豆:168 | 2011-12-26 13:00

嗯,好的,虽然我是用的jquery easui,不过思路应该差不多,上面那个图是我用.net的datagrid控件用模板列做的,粗看了一下你的代码,感觉都是一样的

何小飞 | 园豆:29 (初学一级) | 2011-12-26 13:03

@何小飞: 思路应该是差不多的 我附张图你看下效果:

上面的Checkbox我就是动态拼得

JasonNET | 园豆:168 (初学一级) | 2011-12-26 14:08

@JasonNET: 谢谢

何小飞 | 园豆:29 (初学一级) | 2011-12-26 20:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册