若依框架显示详细信息功能

---

若依框架显示详细信息功能

1.在显示界面引入可预览详细信息选项

重点是引入detailView: true,detailFormatter: detailFormatter,这两个属性
代码如下：

var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            detailView: true,
            detailFormatter: detailFormatter,
            modalName: "工程",
            columns: [{
                checkbox: true
            },
                {
                    field: 'gcid',
                    title: '工程主键',
                    visible: false
                },
                {
                    field: 'gcmc',
                    title: '工程名称'
                },

2.编写detailFormatter的实现函数

可以直接用each函数循环数据，把每个数据元素都展示出来，也可以自定义需要展示的数据
代码如下：

function detailFormatter(index, row) {
        var html = [];
        html.push('<p><b>工程名称:</b> ' + row.gcmc + '</p>');
        html.push('<p><b>工程编号:</b> ' + row.gcbh + '</p>');
        html.push('<p><b>工程性质:</b> ' + $.table.selectDictLabel(datas2, row.gcxz) + '</p>');
        html.push('<p><b>委托编号:</b> ' + row.wtbh + '</p>');
        html.push('<p><b>委托单位:</b> ' + row.wtdw + '</p>');
        html.push('<p><b>完成状态:</b> ' + $.table.selectDictLabel(datas1, row.wczt) + '</p>');
        html.push('<p><b>创建时间:</b> ' + row.createTime + '</p>');
        html.push('<p><b>联系人:</b> ' + (row.lxr == null ? "" : row.lxr) + '&nbsp;&nbsp;<b>联系人电话:</b>' + (row.lxrphone == null ? "" : row.lxrphone) + '</p>');
        // $.each(row, function(key, value) {
        // 	html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        // });
        return html.join('');
    }

3.效果实现

---