jquery EasyUI編集可能テーブル

2508 ワード

 var datas = {total:6,rows:[ 
			{id:1,content:'  1'}, 
			{id:2,content:'  2'}, 
			{id:3,content:'  3'}, 
			{id:4,content:'  4'}, 
			{id:5,content:'  5'}, 
			{id:6,content:'  6'} 
			]}; 
	    
	    <!-------------------      -------------------------->
	    var editcount = 0; 
	    
	    $('#process').datagrid({ 
	    	title:'        ', 
	    	width:600, 
	    	height:'auto', 
	    	singleSelect:true, 
	    	columns:[[ 
	    		{field:'no',title:'  ',width:100,
		    		formatter:function(value, rowData, index){
						return index+1;
					}	
				}, 
	    		{field:'content',title:'  ',width:394,editor:'text'}, 	    		
	    		{field:'id',title:'  ',width:100,align:'id', 
	    			formatter:function(value,row,index){ 
	    				if (row.editing){ 
	    					var s = '<a href="#" onclick="saverow('+index+')">  </a> &nbsp;&nbsp;'; 
	    					var c = '<a href="#" onclick="cancelrow('+index+')">  </a>'; 
	    					return s+c; 
	    				} else { 
	    					var e = '<a href="#" onclick="editrow('+index+')">  </a> &nbsp;&nbsp;'; 
	    					var d = '<a href="#" onclick="deleterow('+index+')">  </a>'; 
	    					return e+d; 
	    				} 
	    			} 
	    		} 
	    	]], 
	    	onBeforeEdit:function(index,row){ 
	    		row.editing = true; 
	    		$('#process').datagrid('refreshRow', index); 
	    		editcount++; 
	    	}, 
	    	onAfterEdit:function(index,row){ 
	    		row.editing = false; 
	    		$('#process').datagrid('refreshRow', index); 
	    		editcount--; 
	    	}, 
			onCancelEdit:function(index,row){ 
				row.editing = false; 
				$('#process').datagrid('refreshRow', index); 
				editcount--; 
			} 
		}).datagrid('loadData',datas).datagrid('acceptChanges'); 
	 });	
	 function editrow(index){ 
		$('#process').datagrid('beginEdit', index); 
		
	 }