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

У меня есть сетка додзё с хранилищем данных json (набор результатов 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"}]}

Как мне это сделать? Пожалуйста, предложите мне несколько идей


json dojo zend-framework dojox.grid.datagrid
person rockstar    schedule 01.07.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Единственный способ, который я знаю, это определение метода форматирования для этого столбца в структуре сетки. Поэтому вместо декларативного определения структуры сетки определите объект 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 >
person Ravi Khakhkhar    schedule 01.07.2012

arrow_upward
3
arrow_downward

Вот рабочий пример,

Изображение в сетке додзё

person Brij    schedule 08.10.2012

arrow_upward
2
arrow_downward

Документация 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, как это сделать в dgrid с помощью функции renderCell в свойствах столбца dgrid.

renderCell(object, value, node, options) — необязательная функция, которая будет вызываться для рендеринга значения в целевую ячейку. объект относится к записи из хранилища сетки для строки, а значение относится к конкретному значению для текущей ячейки (которое могло быть изменено функцией get определения столбца). node относится к ячейке таблицы, которая будет помещена в сетку, если renderCell ничего не вернет; если renderCell возвращает узел, этот возвращенный узел вместо этого будет помещен в сетку. (Примечание: если форматтер указан, renderCell игнорируется.)

person atoha    schedule 21.10.2014

arrow_upward
0
arrow_downward

Если вам не нужна кнопка, а только значок изображения, вы можете вернуть элемент 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;
}
person polli    schedule 15.02.2016