artTemplate取值字段动态渲染的问题

Question

目的：想实现通过JSON定义所有基本信息页面的猜想。
例如：user,menu，...
JSON定义为：

{
    "pageType" : "dic",
    "dicName" : "菜单",
    "hasManyDel" : true,
    "hasCount" : true,
    "hasClass": true,
    "dataObject":{},
    "showColumns":[
        {
            "id":"menu_id",
            "name":"编号",
            "width":60,
            "hidden":false
        },
        {
            "id":"menu_code",
            "name":"编码",
            "width":80
        },
        {
            "id":"menu_name",
            "name":"名称",
            "width":200

后台把获取的menu对象数组塞给dataObject json.dataObject = menu
artTemplate里的dataTables表头如下：

    <thead>
        <tr>
            <th width="25px"><label><input id="chkall" type="checkbox" class="ace"><span class="lbl"></span></label></th>
            {{each pageInfo.showColumns as value}}
                <th width="{{value.width}}px">{{value.name}}</th>
            {{/each}}
            <th width="200px">操作</th>
        </tr>
   </thead>

表体部分示例

{{each pageInfo.dataObject as value}}
    <tr data-id={{value.menu_code}}>
    <td>{{value.menu_id}}</td>
    <td>{{value.menu_code}}</td>
    <td>{{value.menu_name}}</td>
    <td>{{value.menu_page}}</td>

想解决的问题是menu_id,menu_code....这些数据如何动态化
用eval()无法解决，value["x"]方式也不可行，请教高手思路，如有高手赐教，有偿答谢之。

其实这样设计的思想是组件化，又不想用react。改动太大。

Answer 1

您说的明显是VUE、AngularJS的范畴，

Vue 很小也很轻，并且支持任意地方设置数据，更新数据之后同步更新模板，模板语法也类似。

Answer 2

搞定了。把推给前台的对象数组，改为二维数组

var arrAll = [];
        var arr = [];
        result.forEach((i)=>{
            arr = [];
            pageJson.showColumns.forEach((item)=>{
                arr.push(i[item.id]);
            })
            arrAll.push(arr);
        })
        
        pageJson.dataObject = arrAll;

通过JSON定义的列，把data值遍历放入数组，然后前台用2重each