javascript - jQuery easyui 如何实现加载列标题

Question

想让前三列固定显示rows的id、begin、end的内容，后边的几列想把adresses的name显示为列标题。如何实现呢？？还有easyui怎么回去address里的属性？？最好有demo，跪求代码？已崩溃。

Answer 1

之前把意思理解错了，现在改了下，看看是不是你需要的结果

http://runjs.cn/code/fd0i9jin

RUNJS 里的 easyui 是 1.3.1 的，版本有点老，所以加载列和加载数据得分开……

const data = {
    total: 2,
    address: [
        { id: 1, num: "1", name: "博文101" },
        { id: 2, num: "2", name: "博文102" },
        { id: 3, num: "3", name: "博文103" }
    ],
    rows: [
        { id: 1, num: 1, begin: "10:10:30", end: "12:05:30" },
        { id: 2, num: 2, begin: "11:12:30", end: "14:12:30" },
    ]
};

const columns = [[
    { field: "id", title: "ID" },
    { field: "begin", title: "开始" },
    { field: "end", title: "结束" }
].concat(data.address.map(a => ({
    field: `address${a.id}`,
    title: a.name
})))];

const map = data.address.reduce((m, a) => {
    m[a.num] = `address${a.id}`;
    return m;
}, {});

const gridData = {
    total: data.total,
    rows: data.rows.map(r => {
        const row = {
            id: r.id,
            begin: r.begin,
            end: r.end
        };

        Object.keys(map).forEach(key => {
            row[map[key]] = "未预约";
        });
        row[map[r.num]] = `已预约${r.id}`;
        return row;
    })
};

$(function() {
    $("#grid")
        .datagrid({
            columns: columns
        })
        .datagrid("loadData", gridData);
});