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

Posted 2023-02-16

【中文标题】如何将按钮或图像添加到道场网格

【英文标题】：How to add button or images to dojo grid

【发布时间】：2012-07-01 06:55:57

【问题描述】：

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

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

<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" >Student ID</th>
            <th field="first_name" >First Name</th>
            <th field="middle_name" >Middle Name</th>
            <th field="last_name" >Last Name</th>
            <th field="action" >Action</th>
        </tr>
    </thead>
</table>

我的json数据格式是

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

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

【参考方案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 >

【参考方案2】：

这是工作示例，

Image in dojo Grid

【参考方案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的列属性中使用函数renderCell在dgrid中做到这一点。

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

【参考方案4】：

如果你不想要一个按钮，而只想要一个图像图标，你可以像这样从格式化函数返回一个跨度元素：

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;