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

实现：

看一下我们的效果图：

这个上面的最左边的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[n], name: scores.score[n] };
                        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，它自己带的"[]"，我第一开始就加了"[]"，结果吃亏了，哈哈哈，很痛的领悟。

总结：

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