如何添加按钮或图像到dojo网格 [英] How to add button or images to dojo grid

问题描述

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

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

 < span dojoType =dojo.data.ItemFileReadStoredata-dojo -id =studentsStoreurl =http：// localhost / newsmis / public / studentManagement / student / fetchdata / data / 1>< / span> 
< table dojoType =dojox.grid.DataGridid =studentsGriddata-dojo-id =studentsGridcolumnReordering =truesortFields =['idstudents'，'first_name'，'middle_name' ，'last_name']store =studentsStoreclientSort =trueselectionMode =singlerowHeight =25noDataMessage =< span class ='dojoxGridNoData'>没有学生找到< / span>> 
< thead> 
< tr> 
< th field =idstudentswidth =20％>学生ID< / th> 
< th field =first_namewidth =20％>名字< / th> 
< th field =middle_namewidth =20％>中间名< / th> 
< th field =last_namewidth =20％> Last Name< / th> 
< th field =actionwidth =20％> Action< / th> 
< / tr> 
< / thead> 
< / table> 
  

我的json数据格式是

  {identifier：idstudents，items：[{idstudents：11，first_name：Pradip，middle_name：Maan，last_name ：Chitrakar}]} 
  

我该怎么办？请建议我一些想法

解决方案

我知道的一种方式是在网格结构中定义该列的格式化方法。因此，不是声明地定义网格结构，而是在下面的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.DataGridid = studentsGriddata-dojo-id =studentsGridcolumnReordering =truesortFields =['idstudents'，'first_name'，'middle_name'，'last_name']store =studentsStoreclientSort =trueselectionMode = singlerowHeight =25noDataMessage =< span class ='dojoxGridNoData'>未找到学生< / span>结构=结构> 
  

I have a dojo grid with a json datastore (mysql resultset converted into json format). Currently my grid show 5 columns as shown below in the figure:

I have column named 'Action'. The rows under this 'Action' column should contain buttons or images(edit icon, delete icon) with hyperlinks such as edit.php?id=1 for edit, or delete.php?id=1 for delete. Here is my dojo grid code:

<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>

My json data format is

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

How can i do it? Please suggest me some ideas

解决方案

The one way I know is, that defining formatting method for that column in grid structure. So instead of defining the structure of the grid declaratively, define in JavaScript object like below

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;
    }
}

]

and set this structure to the grid

<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 >

这篇关于如何添加按钮或图像到dojo网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！