Editing the data grid

In front of us through the data grid to display the data information in the database, now explain the data grid editing function. The data grid allows users to add new rows and update row data.

The following tutorial shows how to create a data grid for editing features.

Effect Chart:

The demo effect can be as follows:

Http://www.jeasyui.com/tutorial/datagrid/datagrid12_demo.html

We follow:

http://blog.csdn.net/gdhyyanglang/article/details/8293662

To refine the data grid functionality.

[HTML] view plain copy print <tableid= "tt" class= "Easyui-datagrid" style= "width:550px;height : 250px "url=" datagrid_getdata.jsp "title=" Load Data iconcls= "Icon-save" rownumbers= "true" pagination= "true" toolbar= "#tb" singleselect= "true" > <thead> <tr> <thfield= "id" width= ">id</th> <thfield=" Name "width=" editor= "text" >name</th> <thfield= "password" width= "formatter=" FORMATPSW "editor=" Text ">pasword</th> <thfield=" Mail "width=" 180 "editor=" text ">mail</th> <thfield=" action " Width= "formatter=" "Formataction" >action</th> </tr> </thead> </table>

<table id= "tt" class= "Easyui-datagrid"
    style= "width:550px;height:250px" url= "datagrid_getdata.jsp" title= "Load Data" 
    iconcls= "Icon-save"
    rownumbers= "true" 
    pagination= "true"
    toolbar= "#tb"
    Singleselect= "true" > 
    <thead>
        <tr>
            <th field= "id" width= "*" >id</th>  
            <th field= "name" width= "editor=" text ">name</th> <th field=" password "width=" "formatter="  
            FORMATPSW "editor=" text >pasword</th>  
            <th field= "Mail" width= "180" editor= "text" >mail</th >
            <th field= "action" width= "formatter=" "Formataction" >action</th>  
        </tr> 
    </thead>  
</table>

Looking at the modified table above, we can see that we have added three new knowledge points: 1 The Singleselecte property of the table, which means that only one row is selected, and 2 formatter represents the formatting of the text in the th label; 3) editor represents the style of this field when editing a row.

Finally, we add a list of action to store two buttons. Where the code that holds the button is in the Format method formataction.

Now we need to write 2 formatted methods, the code is as follows: [HTML] view plain copy print? Format password display style, the format method has three parameters//The first represents the formatted value, the second represents the row record, and the third represents the row index//Return field value function FORMATPSW (value, row) {if (Value.length < 8) {//If the field value is less than 8, let the value display the Red style return "<spanstyle= ' color:red;" > "+ value + </span>"; else {return value;}} function formataction (value, row, index) {if (row.editing) {//If row is edited, show save and cancel var s = "<a href= ' # ' onclick= ' Saverow" (thi s) ' >Save</a> '; var c = "<a href= ' # ' onclick= ' Cancelrow (this) ' >Cancel</a>"; return S + C; else {//If rows are not clipped, show edit and delete var e = "<a href= ' # ' onclick= ' Editrow (this) ' >Edit</a>"; var d = "<a href= ' # ' onclick= ' DeleteRow" (This) ' >Delete</a> '; return e + D; } }

Format password display style, the format method has three parameters
//The first represents the formatted value, the second represents the row record, and the third represents the row index
//Return field value
function formatpsw (value, row) {  
    if (Value.length < 8) {//If the field value is less than 8, let the value display the Red style return
        "<span style= ' color:red;" > "+ value +" </span> ";  
    } else {return  
        value;  
    }  
} 
function formataction (value, row, index) {if
	(row.editing) {//If row is edited, show save and cancel 
    	var s = "<a href= ' # ' onclick= ' Saverow (This) ' >Save</a> ';  
      	var c = "<a href= ' # ' onclick= ' Cancelrow (this) ' >Cancel</a>";  
       	return s + C;  
	} else {  //If the row is not clipped, show edit and delete
     	var e = "<a href= ' # ' onclick= ' Editrow (this) ' >Edit</a>";  
        var d = "<a href= ' # ' onclick= ' DeleteRow" (This) ' >Delete</a> ';  
        return e + D;  
    }    
}

After using the formatting method, passwords with a visible password length of less than 8 are displayed in red. Also, because rows are not edited by default, display edits and deletions.

7.1 Edit Events in Formataction we show four buttons (a label) and add a click event to each button to see the Editrow method first:
[HTML] view plain copy print? function Getrowindex (target) {//closest searches for ' tr.datagrid-row ' from the current start, that is, the current line, var tr = $ (target). Closest (' Tr.datagrid-row '); /Get Line number return parseint (tr.attr (' Datagrid-row-index ')); function Editrow (target) {///start edit getrowindex (target) line $ (' #tt '). DataGrid (' BeginEdit ', Getrowindex (target));}

function Getrowindex (target) {
	//closest searches for ' tr.datagrid-row ' from the current start, that is, the current line,
    var tr = $ (target). Closest (' Tr.datagrid-row ');
	Gets the number of rows return
    parseint (tr.attr (' Datagrid-row-index '));  
}
function Editrow (target) {  
	//start edit getrowindex (target) row
    $ (' #tt '). DataGrid (' BeginEdit ', Getrowindex (target) ); 
}

Now click the Edit button to see that the TD tag with the editor property has its value text text applied. However, the edit and delete buttons are not converted to save and cancel buttons when editing the state. How to solve this problem. Review the previous format display condition is based on row.editing, we only need to click the Edit button when the row.editing set to True.

The

Setting row.editing can be set in the data grid event of the system setup. [HTML] view plain copy print? $ (function () {$ (' #tt '). DataGrid ({//Edit start is triggered Onbeforeedit:function (index, row) {row.editing = true; Updateactions ( index);//Change row state after update row},//Edit is triggered Onafteredit:function (index, row) {row.editing = false; updateactions (index);},// Suppresses editing and triggers oncanceledit:function (index, row) {row.editing = false; updateactions (index);}}); }); function Updateactions (index) {$ (' #tt '). DataGrid (' Updaterow ', {index:index,//updated number of rows row:{}});

$ (function () {
    $ (' #tt '). DataGrid ({ 
		//Edit start is triggered
		onbeforeedit:function (index, row) {  
            row.editing = true;
			Updateactions (index);//Change row state after update row
        },
		//Edit is triggered
        onafteredit:function (index, row) {  
            row.editing = false;  
			Updateactions (index);  
        },
		//Cancel edit triggers
        oncanceledit:function (index, row) {  
            row.editing = false;    
			Updateactions (index);  
        }  
	}
); function Updateactions (index) {  
    $ (' #tt '). DataGrid (' Updaterow ', {  
        index:index,//updated number of rows 
        row:{}  
    }) ; 
}

7.2 Delete event [HTML] view plain copy print? function DeleteRow (target) {$.messager.confirm (' Confirm ', ' Are you sure? ', function (OK) {if (OK) {$ (' #tt '). DataGrid (' DeleteRow ', Getrowindex (target)); } }); }

function DeleteRow (target) { 
    $.messager.confirm (' Confirm ', ' Are you sure? ', function (OK) {  
        if (OK) {  
            $ (' # tt '). DataGrid (' DeleteRow ', Getrowindex (target);}  
        }  
    );  

7.3 Save Event [HTML] view plain copy print? function Saverow (target) {$ (' #tt '). DataGrid (' EndEdit ', Getrowindex (target));

function Saverow (target) {  
    $ (' #tt '). DataGrid (' EndEdit ', Getrowindex (target));  

7.4 Cancel event [HTML] view plain copy print? function Cancelrow (target) {$ (' #tt '). DataGrid (' CancelEdit ', Getrowindex (target));

function Cancelrow (target) {  
    $ (' #tt '). DataGrid (' CancelEdit ', Getrowindex (target));  

The above four events only modify the information on the interface and do not modify the data in the database. If you want to modify the database, you can do database operations in the appropriate method.