EasyUi -- 如何根据动态加载panel和Datagrid

在做项目的过程中，前台的面板和表格一般都不是固定的，它是根据后台传来的数据进行变化的。举个例子：

实现：

看一下我们的效果图：



这个上面的最左边的Panel要根据系别动态加载，有多少个系别就要加载都少个Panel，Panel里面的是一个table，这个里面也是动态加载出来。

右边是一个datagrid，datagrid里面的工作效率、业务能力等等也都是数据库动态加载出来的，包括后面的ABCD也是动态的。

这样就算数据库中的数据怎么变，这里都会动态地加载出来。那么怎么实现这些功能呢？

一、动态加载Panel：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> $.getJSON("/Evaluation/GetAllCrites", null, function (data) {
for (var m = 0; m < data.SeriesValueSaveNum; m++) {
$("#panal").accordion('add', {
title: data.SeriesNameSave[m],
content: "<div style='text-align:center' id='tableDiv" + m + "'>" + ini(data, m) + "</div>"
});
}</span>

第一行，其实是调用EvaluationController中的GetAllCrites函数，返回data就是从后台传来的数据了，这里用到的是panel的Add的属性，title和content就是panel的参数。

简单的写一下，就是这样的：

<span style="font-family:KaiTi_GB2312;font-size:18px;">for (var m = 0; m < 3; m++) {
$("#panal").accordion('add', {
title: "panel的标题",
content: "panel的内容！"
});
}</span>

这样是不是就很简单了。

二、动态加载table中的数据

table其实就是用来规定格式，我们可以在table里面放各种的控件或者数据。这里的代码实现是：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> function ini(data, num) {
var maxCol = 0;
//var strTbody = ["<table>"];
var strTbody = ["<table width='210px'>"];
strTbody += "<tr>";
for (var i = 0; i < data.StaffNameSave[num].length; i++) {
strTbody += "<td><input name='mychk' type='checkbox' id='" + data.StaffIDSave[num][i] + "' onclick='onMyChk(this);' value='" + data.StaffNameSave[num][i] + "' />" + data.StaffNameSave[num][i] + "</td>";
maxCol++;
if (maxCol % 3 == 0) {
strTbody += "</tr>";
strTbody += "<tr>";
}
}
strTbody += "</tr>";
strTbody += "</table>";
return strTbody;
}</span>

当然这里面我也用到了拼接字符串，这里直接return strTbody到上面panel里面是最上面的效果了。

三、动态加载datagrid的列数和列数据

<span style="font-family:KaiTi_GB2312;font-size:18px;"> function getjson() {
$.getJSON('/Evaluation/QueryAssessProgram', null, function (data) {
$.getJSON('/Evaluation/QueryScores', null, function (scores) {
var columns = new Array();

var products = new Array();
//var titles = [];
for (var n = 0; n < scores.num; n++) {
var product = { productid: scores.scorevalue
, name: scores.score
};
products.push(product);
};

for (var i = 0; i < data.headersnum; i++) {

//传值,将考核项的名称以数组的形式传递
//proheadername.push(data.headersName[i]);
//拼接字符串，出现ABCD的效果
var titles = [];
for (var j = 0; j < scores.num; j++) {
var title = '<a href="#" onclick="addscore(' + "'" + scores.score[j] + "'" + ',' + "'" + data.headersName[i] + "'" + ',' + "'" + scores.scorevalue[j] + "'" + ')">' + scores.score[j] + ' </a>';
titles += title;
}
var column = {
field: data.headersName[i], title: data.headersName[i] + titles, width: 100, formatter: function (value) { for (var i = 0; i < products.length; i++) { if (products[i].productid == value) return products[i].name; } return value; }, editor: { type: 'combobox', options: { valueField: 'name', textField: 'name', data: products, required: true } }
}
columns.push(column);
}

var column1 = { field: 'TotalScores', title: '总分', width: 50 }
columns.push(column1);
var column2 = { field: 'action', title: '修改', width: 70, align: 'center', formatter: function (value, row, index) { if (row.editing) { var s = '<a href="#" onclick="saverow(this)"><img src="../../EasyuiSource/themes/icons/filesave.png" border="0">保存</a> '; var c = '<a href="#" onclick="cancelrow(this)"><img src="../../EasyuiSource/themes/icons/cancel.png" border="0">取消</a>'; return s + c; } else { var e = '<a href="#" id="deitcls" onclick="editrow(this)"><img src="../../EasyuiSource/themes/icons/pencil.png" border="0">修改</a> '; return e; } } }
columns.push(column2);

initTable(columns);

})
})
}</span>

这样我们就可以调用inittabe这个函数讲我们写好了的列的属性放在datagrid里面了：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> function initTable(columns) {
$('#dg').datagrid({
title: '评分',
//url: '/Division/QueryBy',
url: '',
width: '740',
rownumbers: true,
frozenColumns: [[
{
field: 'checked', formatter: function (value, row, index) {
if (row.checked) {
return '<input type="checkbox" name="DataGridCheckbox" checked="checked">';
}
else {
return '<input type="checkbox" name="DataGridCheckbox">';
}
}, width: 25
},

{ field: 'Name', title: '姓名', width: 80 },
{ field: 'ID', title: 'productname', hidden: 'true' }
]], columns: [
columns
],
onBeforeEdit: function (index, row) {
row.editing = true;
updateActions(index);
},
onAfterEdit: function (index, row) {
row.editing = false;
updateActions(index);
},
onCancelEdit: function (index, row) {
row.editing = false;
updateActions(index);
}
//singleSelect: true,
});
}</span>

这里要记住一点就是我们都要知道columns这个参数其实Array，它自己带的"[]"，我第一开始就加了"[]"，结果吃亏了，哈哈哈，很痛的领悟。

总结：

我们在设计前台的时候就一定要想到，自己做的界面是不是可以满足各种各样的要求，我们想得越多，这样我们的软件存活的时间就越长！