Как добавить кнопку или изображения в сетку dojo

Question

У меня есть сетка dojo с json datastore (набор данных 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" 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

As documenta Тион 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 (объект, значение, узел, параметры) - необязательная функция, которая будет вызываться для рендеринга значения в ячейку-мишень. объект ссылается на запись из хранилища сетки для строки, а значение относится к конкретному значению текущей ячейки (которое может быть изменено функцией получения определения столбца). node ссылается на ячейку таблицы, которая будет помещена в сетку, если ничего не будет возвращено renderCell; если renderCell возвращает узел, то возвращенный узел будет помещен в сетку вместо этого. (Примечание: если указан форматировщик, renderCell игнорируется.)

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