Easyui Datagrid Custom Columns, foolter, and cell edits

1: Custom columns, including Group

var head1array = [];
Head1array.push ({field: ' Id ', title: ' xxxx ', rowspan:2});
Head1array.push ({title: ' yyyy ', colspan:4});
var head2array = [];
//.EACH(UNITS,FUNCTION(I,UNIT)//COLARRAY.PUSH(FIELD:′ID′,TITLE:UNIT.NAME);//);HEAD2ARRAY.PUSH(FIELD:′ID′,TITLE:′111′);HEAD2ARRAY.PUSH(FIELD:′ID′,TITLE:′222′);HEAD2ARRAY.PUSH(FIELD:′ID′,TITLE:′333′);HEAD2ARRAY.PUSH(FIELD: ′i D′, Tit le : ′444′) (' #UnitScores '). DataGrid ({
Columns: [Head1array, Head2array],
footer:[{"Id": "Total"}],
Showfooter:true
});

The resulting effect is as follows:

Note that the value of the Datagrid's columns is the array, and the elements of the array itself are arrays, which is equivalent to a two-dimensional array. If you don't pay attention to this, columns will not come out.

Use of 2:footer

In the use of Footer, you must specify rows and Footer two properties for data, otherwise, Footer will not appear, as follows:

var rowsx = [];
Rowsx.push ({"Id": "Category type attribute name:"});
Rowsx.push ({"Id": "Category type attribute value:"});
Rowsx.push ({"Id": "Text type attribute name:"});
var footer = [{"Id": "Total"}];
var datax = {"Rows": rowsx, "Footer": footer};
$ (' #UnitScores '). PropertyGrid (' LoadData ', datax);

var rows = (' #questionUnitScores '). DataGrid (' Getfooterrows '); rows[0][' Id '] = ' new name ';(' #UnitScores '). DataGrid (' Reloadfooter ');

3: For cell editing

Suppose the column format should look like this:

$ (' #Units '). DataGrid ({
Pagenumber:1,
URL: "@ViewBag. Domain/paper/getquestionunit",
Columns: [[
{field: ' id ', title: ' ID ', width:100, Editor: ' Text '},
{field: ' Name ', title: ' Name ', width:100, Editor: ' Text '}
]],
Pagination:false,
Rownumbers:true,
Onclickcell:onclickcell
});

Editor can also be a type, as follows:

{field: ' ProjectID ',
Title: ' Project/paid Leave ',
WIDTH:100,
editor:{
Type: ' ComboBox ',
options:{
Valuefield: ' id ',
TextField: ' Descriptioncode ',
Data:cmbprojects,
Required:true,
Editable:false,
Onselect:function (record) {
}
}
}

The default, Easyui for editing, is in the behavior unit, that is, you want to trigger the edit, the first trigger is the entire line of editing, similar to the following:

$ (' #Units '). DataGrid (' BeginEdit ', index);

The above code means that the index line can be edited. If you want to edit a cell, we use it to click a cell and a row can be edited, the code is as follows:

function Onclickcell (index, field) {
(' #Units '). DataGrid (' BeginEdit ', index); var ed = (' #questionUnits '). DataGrid (' Geteditor ', {index:index, field:field});
(EDta rg et ) . Val ( " Ddd d " ) (' #Units '). DataGrid (' EndEdit ', index);
}

In the above method, the second line shows the current editor, note that the Geteditor method must be after beginEdit, otherwise, we get the ed null. When you get the editor, you can assign a value to it if you don't want to enter it in the interface. The EndEdit method turns off the editable state of the row and indicates that the DataGrid has received a change to the value, at this time, if we look at the $ (' #questionUnits '). DataGrid (' GetRows '), get the modified value.

If you do not endEdit in Onclickcell, you can also accept the modified values externally, using the method:

$ (' #Units '). DataGrid (' AcceptChanges ');

Can.

3.1 How to start a modification to a specified cell

It also says that BeginEdit initiates modifications to a row, and if a cell in the row starts the modification, and the other cell does not start the modification at all, one of the options is:

$ (ed.target). attr ("Disabled", true);

3.2 How to let Row get extra properties for Editor

Unless you extend one of your own eidtor, Editor has only two properties: Type,options. However, another way of thinking is to get Columns's Options to achieve this goal. For example, the definition Editor is:

Editor: {type: ' Numberbox ', options: {' Unittemplatecode ': item. ID}}

Then, get col, as follows:

var fields = $ (' #UnitScores '). DataGrid (' Getcolumnfields ');

var col = $ (' #UnitScores '). DataGrid (' Getcolumnoption ', fields[i]);

The additional attribute Unittemplatecode can then be obtained with the following code.

Col.editor.options.UnitTemplateCode

3.3 This editor is not the editor

In the above, by:

var ed = $ (' #Units '). DataGrid (' Geteditor ', {index:index, field:field});

We also got an Editor, Ed, which is an object defined within the Easyui framework, and not the same object as the object we get through Col.editor.

Easyui Datagrid Custom Columns, foolter, and cell edits