Create a datagrid
Add a div or table tag on the page, use jquery to obtain the tag, and initialize a datagrid. The Code is as follows:
Div labels on the page:
<div id="magazineGrid"></div>
Js Code:
$ ('# Magazinegri '). datagrid ({height: 340, url: 'url', method: 'post', queryParams: {'id': id}, idField: 'product id', striped: true, fitColumns: true, singleSelect: false, rownumbers: true, pagination: false, nowrap: false, pageSize: 10, pageList: [10, 20, 50,100,150,200], showFooter: true, columns: [[{field: 'ck ', checkbox: true}, {field: 'publication name', title: 'publication name', width: 180, align: 'left '}, {field: 'category', title: 'category', width: 150, align: 'left'}, {field: 'month', title: 'month', width: 100, align: 'left'}, {field: 'period sub', title: 'period sub', width: 100, align: 'left'}, {field: 'price', title: 'price', width: 100, align: 'right'}, {field: 'subscription size', title: 'subscription size', width: 100, align: 'right'}, {field: 'inventory number', title: 'inventory number', width: 100, align: 'right'}, {field: 'mailing method ', title: 'mailing method', width: 80, align: 'left'}, {field: 'quantity', title: 'quantity', width: 80, align: 'left', editor: {type: 'numberbox', options: {min: 0, precision: 0 }}]], onBeforeLoad: function (param ){}, onLoadSuccess: function (data) {}, onLoadError: function () {}, onClickCell: function (rowIndex, field, value ){}});
Data format returned by an ajax request
After the datagrid is created, it requests data based on the url. This is done through ajax. The server should return data with the rows attribute after processing the request. If pagination is used, the server also needs the total attribute:
var rst = new { total = iTotalCount, rows = entityList };
Speaking of ajax requests, it is inevitable that some query conditions need to be input during the request. I usually add query conditions in the onBeforeLoad event:
onBeforeLoad: function (param) { var bId = $("#txtBId").val(); var AllSearchKey = $("#txtAllSearchKey").val(); param.bId = bId; param.AllSearchKey = AllSearchKey;}
Paging
To enable paging, add the following configuration in the datagrid Configuration:
pagination: true,
In this way, a page Toolbar will appear at the bottom of our datagrid.
At this time, the datagrid automatically adds paging information when requesting data:
- Page: page number of the current request
- Rows: number of rows to be displayed on each page
Obtain the two parameter values on the server side, and then obtain the total number of data rows in the database to complete data processing.
Checkbox Columns
The datagrid created by the js Code above has already added the checkbox column, which is the first column. The checkbox column will be adaptive to the width.
{ field: 'ck', checkbox: true },
About rownumber Columns
The rownumber column is configured globally. If it is set to true, a column is added to display the row number.
rownumbers: true
Implementation of the row editing function
The datagrid provides the row editing function. Two steps are required:
- Set the editor attribute of a column
- Manually trigger editing
In the first step, we need to specify the editor in the column configuration. The editor has two attributes: type and options. Valid type strings include:
Text, textarea, checkbox, numberbox, validatebox, datebox, combobox, combotree
Options corresponds to the specific configurations of these controls, including events.
editor: { type: 'numberbox', options: { min: 0, precision: 0 }}
If no special options configuration is required, you can directly assign the type string to the editor.
editor:'text'
Step 2: We need to listen to the onRowClick event or onCellClick event of the datagrid. I prefer to listen to the onCellClick event. You can click different fields to enter the editing mode, set the focus of the cell editing control.
onClickCell: function (rowIndex, field, value) { beginEditing(rowIndex, field, value)}
The beginEditing method is called here:
Var editIndex = undefined; var beginEditing = function (rowIndex, field, value) {if (field! = "Quantity") return; if (rowIndex! = EditIndex) {if (endEditing () {$ ('# magazinegri '). datagrid ('ineinedit ', rowIndex); editIndex = rowIndex; var ed = $ (' # magazinegri '). datagrid ('geteditor', {index: rowIndex, field: 'quantity'}); iterator (ed.tar get ). focus (). bind ('blur', function () {endEditing () ;});} else {$ ('# magazinegri '). datagrid ('selectrow', editIndex) ;}} var endEditing = function () {if (editIndex = undefined) {return true} if ($ ('# magazinegri '). datagrid ('validaterow', editIndex) {var ed = $ ('# magazinegri '). datagrid ('getedit', {index: editIndex, field: 'quantity'}); var number = values (ed.tar get ). numberbox ('getvalue'); $ ('# magazinegri '). datagrid ('getrows ') [editIndex] ['qty'] = number; $ ('# magazinegri '). datagrid ('enabled', editIndex); $ ('# magazinegri '). datagrid ('selectrow', editIndex); editIndex = undefined; return true;} else {return false ;}}
Formatter of column formatting output
Set formatter in column Breeding
formatter: function (value, row, index) { if (row.user) { return row.user.name; } else { return value; }}
Use Toolbar
toolbar: [{ text: 'Add', iconCls: 'icon-add', handler: function () { alert('add') }}, { text: 'Cut', iconCls: 'icon-cut', handler: function () { alert('cut') }}, '-', { text: 'Save', iconCls: 'icon-save', handler: function () { alert('save') }}],
Use CardView Effect
The cardView effect is as follows:
CardView code:
var cardview = $.extend({}, $.fn.datagrid.defaults.view, { renderRow: function (target, fields, frozen, rowIndex, rowData) { var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">'); if (!frozen) { var aa = rowData.itemid.split('-'); var img = 'shirt' + aa[1] + '.gif'; cc.push(''); cc.push('<div style="float:left;margin-left:20px;">'); for (var i = 0; i < fields.length; i++) { var copts = $(target).datagrid('getColumnOption', fields[i]); cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>'); } cc.push('</div>'); } cc.push('</td>'); return cc.join(''); }});$(function () { $('#tt').datagrid({ view: cardview });});
CardView uses the view configuration of the datagrid and overwrites its default renderRow method. Based on this implementation, we can display more lateral views.