Question

我有一个带有json数据存储区的dojo网格（mysql结果集转换为json格式）。目前我的网格显示5列，如下图所示： enter image description here

我的列名为'Action'。此“操作”列下的行应包含带有超链接的按钮或图像（编辑图标，删除图标），例如edit.php？id = 1用于编辑，或者delete.php？id = 1用于删除。这是我的dojo网格代码：

<span dojoType="dojo.data.ItemFileReadStore" data-dojo-id="studentsStore" url="http://localhost/newsmis/public/studentManagement/student/fetchdata/data/1"></span>
<table dojoType="dojox.grid.DataGrid" id="studentsGrid" data-dojo-id="studentsGrid" columnReordering="true" sortFields="['idstudents','first_name','middle_name','last_name']" store="studentsStore"  clientSort="true" selectionMode="single" rowHeight="25" noDataMessage="<span class='dojoxGridNoData'>No students found</span>">
    <thead>
        <tr>
            <th field="idstudents" width="20%">Student ID</th>
            <th field="first_name" width="20%">First Name</th>
            <th field="middle_name" width="20%">Middle Name</th>
            <th field="last_name" width="20%">Last Name</th>
            <th field="action" width="20%">Action</th>
        </tr>
    </thead>
</table>

我的json数据格式是

 {"identifier":"idstudents","items":[{"idstudents":"11","first_name":"Pradip","middle_name":"Maan","last_name":"Chitrakar"}]}

我该怎么办？请给我一些建议

Answer 1

我知道的一种方法是，在网格结构中定义该列的格式化方法。因此，不是以声明方式定义网格的结构，而是在JavaScript对象中定义，如下所示

var structure = [
{
    name: "First Name",
    field: "first_name"
},
{
    name: "Action",
    field: "_item",
    formatter: function(item){
        var btn = new dijit.form.Button({
            label: "Edit"
        });
    return btn;
    }
}

并将此结构设置为网格

<table dojoType="dojox.grid.DataGrid" id="studentsGrid" data-dojo-id="studentsGrid" columnReordering="true" sortFields="['idstudents','first_name','middle_name','last_name']" store="studentsStore"  clientSort="true" selectionMode="single" rowHeight="25" noDataMessage="<span class='dojoxGridNoData'>No students found</span>" structure=structure >

Answer 2

以下是工作示例

Image in dojo Grid

Answer 3

因为dojox.grid.DataGrid的文档仍然存在：

从Dojo 1.7开始，您应该使用dgrid或gridx，下一代网格组件，充分利用现代浏览器和对象存储。

一段代码示例：

columns: [
            {
                field: "id",
                label: "ID"
            },
            {
                field: "name",
                label: "Name"
            },
            {
                field: "options",
                label: "Options",
                renderCell: function (obj) {
                    var cellContent = domConstruct.create("div",{});
                    var btn = new Button({
                        label: "Cell " + obj.id,
                        name: "idBtn"
                    })
                    btn.placeAt(cellContent);

                    on(btn, "click", function (evt) {
                        console.log(obj);
                    });

                    return cellContent;
                }
            }
        ]

这是JSfiddle example如何在dgrid中通过在dgrid的列属性中使用函数renderCell来完成它。

renderCell（object，value，node，options） - 一个可选函数，将被调用以将值呈现到目标单元格中。 object指的是行的网格存储中的记录，value指的是当前单元格的特定值（可能已被列定义的get函数修改）。 node表示如果renderCell没有返回任何内容，将放置在网格中的表格单元格;如果renderCell返回一个节点，那么返回的节点将被放置在网格中。（注意：如果指定了formatter，则忽略renderCell。）

Answer 4

如果您不想要按钮，只需要图像图标，则可以从格式化程序功能中返回span元素，如下所示：

formatter: function(value) {
    var myValueClass = "dijitNoValue";
    ...
    myValueClass = "ValueClass1";
    ...
    return "<span class='dijitReset dijitInline dijitIcon " + myValueClass + "'></span>";
}

必须将css类定义为

.ValueClass1 {
    background-image: url('val_image1.png');
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    text-align: center;
    background-position: 1px;
}

如何将按钮或图像添加到dojo网格

4 个答案: