Question

jquery ui 表格插件datagrid怎样点击一行前面的加号下面出现内容

Answer 1

1、首先要下载datagrid-detailview.js，这个是easyUI的扩展插件

2、创建html页面，初始化datagrid表格

例如：

<table class="easyui-datagrid" id="dg" style="width:700px;height:250px"
            title="DataGrid - Expand Row"
            singleSelect="true" fitColumns="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="100">Product ID</th>
                <th field="listprice" align="right" width="80">List Price</th>
                <th field="unitcost" align="right" width="80">Unit Cost</th>
                <th field="attr1" width="220">Attribute</th>
                <th field="status" width="60" align="center">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td><td>p1</td><td>$100</td><td>$10</td><td>Spotless Male Puppy</td><td>p</td>
            </tr>
            <tr>
                <td>002</td><td>p1</td><td>$100</td><td>$22</td><td>111</td><td>p</td>
            </tr>
            <tr>
                <td>003</td><td>p1</td><td>$100</td><td>$33</td><td>222</td><td>p</td>
            </tr>
            <tr>
                <td>004</td><td>p1</td><td>$100</td><td>$44</td><td>444</td><td>p</td>
            </tr>
        </tbody>
    </table>

js：

$('#dg').datagrid({
                view: detailview,
                detailFormatter:function(index,rowData){

                    //如果需要更详细的数据，这里可以使用ajax获取数据。在封装返回。

                    return '<table><tr>' +
                    '<td rowspan=2 style="border:0"><img src="images/' + rowData.itemid + '.png" style="height:50px;"></td>' +
                    '<td style="border:0">' +
                    '<p>Attribute: ' + rowData.attr1 + '</p>' +
                    '<p>Status: ' + rowData.status + '</p>' +
                    '</td>' +
                    '</tr></table>';
                },
            });

演示：