Easyui DataGrid Edit Cell

Previous article Easyui DataGrid editable cells implement editable cells, if more than one column needs to be editable when clicking on a cell, the entire row will be edited

Such as:

Now click a cell to make the cell editable only

<TABLE>Tag Add Onclickcell

<table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell">

Add editor on columns that need to be edited

<th data-options="field:‘itemId‘,editor:‘numberbox‘"></th>

You can also specify

• Number of decimal digits: editor:{type: ' Numberbox ', Options:{precision:1}}

• Text type: Editor: ' Text '

• Checkbox:editor:{type: ' checkbox ', Options:{on: ' Start ', off: ' Off '}}

The effect is as follows:

Core code

<script type="Text/javascript">$.extend ($.fn.datagrid.methods, {editcell: function(JQ, param) {        returnJq.each ( function() {            varOPTs = $ ( This). DataGrid (' Options ');varFields = $ ( This). DataGrid (' Getcolumnfields ',true). Concat ($ ( This). DataGrid (' Getcolumnfields ')); for(vari =0; i < fields.length; i++) {varCol = $ ( This). DataGrid (' Getcolumnoption ', Fields[i]); Col.editor1 = Col.editor;if(Fields[i]! = Param.field) {Col.editor =NULL; }            }            $( This). DataGrid (' BeginEdit ', Param.index); for(vari =0; i < fields.length; i++) {varCol = $ ( This). DataGrid (' Getcolumnoption ', Fields[i]);            Col.editor = Col.editor1;    }        }); }});varEditindex =undefined;//End Edit function endediting() {    if(Editindex = =undefined) {return true}if($(' #dg '). DataGrid (' Validaterow ', Editindex)) {$ (' #dg '). DataGrid (' EndEdit ', Editindex); Editindex =undefined;return true; }Else{return false; }}//Click cell function onclickcell(Index, field) {    if(Endediting ()) {        $(' #dg '). DataGrid (' SelectRow ', index). DataGrid (' Editcell ', {index:index, field:field});    Editindex = index; }}</script>

Online Demo

Itmyhome

Easyui DataGrid Edit Cell