anilsajan Ответов: 1

Редактирование ячеек Jqgrid в javascript ASP.NET

Jqgrid Cell edit in javascript asp.net


Что я уже пробовал:

Jqgrid Cell edit in javascript asp.net

1 Ответов

Рейтинг:
2

anilsajan 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/16369684/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        $(function () {
            "use strict";
            var mydata = [
                    {id:"1", idcustomers: "x", firstname: "y", lastname: "z"},
					   {id:"44", idcustomers: "x", firstname: "y", lastname: "z"},
					      {id:"22", idcustomers: "x", firstname: "y", lastname: "z"},
						     {id:"33", idcustomers: "x", firstname: "y", lastname: "z"},
						     {id:"4", idcustomers: "x", firstname: "y", lastname: "z"},
						     {id:"3", idcustomers: "x", firstname: "y", lastname: "z"},
							    {id:"2", idcustomers: "x", firstname: "y", lastname: "z"}
                ];
            $("#list").jqGrid({
                //url:'php.scripts/customers.get.php',
                //datatype: 'xml',
                //mtype: 'POST',
                datatype: "local",
                data: mydata,
                height: "auto",
                colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
                colModel :[
                    {name:'idcustomers', index:'idcustomers', width:55},
                    {name:'firstname', index:'firstname', width:90, editable: true},
                    {name:'lastname', index:'lastname', width:90, editable: true},
                    {name:'address1', index:'address1', width:90, editable: true},
                    {name:'address2', index:'address2', width:90, editable: true},
                    {name:'city', index:'city', width:90, editable: true},
                    {name:'state', index:'state', width:90, editable: true},
                    {name:'zip', index:'zip', width:90, editable: true},
                    {name:'phone', index:'phone', width:90, editable: true},
                    {name:'email', index:'email', width:90, editable: true},
                    {name:'cell', index:'cell', width:90, editable: true}
                ],
                pager: '#pager',
                rowNum:10,
				height:120,
			    multiselect :true,
                rowList:[10,20,30],
                sortname: 'idcustomers',
                sortorder: 'asc',
                viewrecords: true,
				 loadComplete: function () {
        $("#cb_" + this.id).click();
    },
                gridview: true,
                caption: 'Customers',
                cellEdit: true,
                cellsubmit: 'clientArray',
                afterSaveCell: function(rowid,name,val,iRow,iCol) {
                    alert("alert1!");
                },
                afterEditCell: function (id,name,val,iRow,iCol){
                   // alert("alert2!");
				    e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
                }
            });
			
			$("p").click(function(){
			saveEdits();
			
var Ids = jQuery("#list").jqGrid('getGridParam','selarrrow');    
for(var i=0;i<Ids.length; i++) {

var selecteddatais = $("#list").jqGrid('getRowData',Ids[i]);
alert(selecteddatais.lastname);
// do what you want here

}

    alert("The paragraph was clicked.");
    var Ids = jQuery("#list").jqGrid('getGridParam','selarrrow');    
for(var i=0;i<Ids.length; i++) {

var selecteddatais = $("#list").jqGrid('getRowData',Ids[i]);
// do what you want here

}
	});
	
	
	function saveEdits() {
    var $input = $("#list").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}
        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
	
	<p>Click on this paragraph.</p>
</body>
</html>