datagrid编辑单元格中的内容

datagrid 编辑单元格中的内容

2、效果图

datagrid编辑单元格中的内容

3、修改：

(1)、在 datagrid 配置中加上行 onClickCell: onClickCell,

onClickCell: onClickCell,

(2)、在 sort 字段中加上属性： editor:'numberbox'

editor:'numberbox'

(3)、在 js 中加上 onClickCell 方法

//START
$.extend($.fn.datagrid.methods, {
	editCell: function(jq,param){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor1 = col.editor;
				if (fields[i] != param.field){
					col.editor = null;
				}
			}
			$(this).datagrid('beginEdit', param.index);
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor = col.editor1;
			}
		});
	}
});

var editIndex = undefined;
function endEditing(){
	if (editIndex == undefined){return true}
	if ($('#js_set_easyuiTable').datagrid('validateRow', editIndex)){
		$('#js_set_easyuiTable').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickCell(index, field){
	if (endEditing()){
		$('#js_set_easyuiTable').datagrid('selectRow', index)
				.datagrid('editCell', {index:index,field:field});
		editIndex = index;
	}
}
//END

完成之前3步就能够在前端页面看到效果了，

但是得同步修改后台数据，那就加上下面 2 步：

（1）、在datagrid中加上属性，编辑完失去焦点后续操作。

//编辑确认之后后台操作	//3 object{id:1,title:'你好'...} object(sort:'103')
onAfterEdit:function (index, row, changes) {
    $.ajax({
	url : '/index/index/test',	//这里写上有效的请求地址，然后在后台操作即可
	type:'post',
        data:{id:row.id,sort:row.sort}, //额外的参数
	dataType: "json",//响应结果为文本
	success:function (data) { 
	    if(data.status=='success'){
                $('#js_set_easyuiTable').datagrid('reload');	//修改一次刷新一次表格
	    }
	}
    });
}

（2）、PHP后台操作

function testAction(){
    $id = $_POST['id'];
    $sort = $_POST['sort'];
    $mArticle = new ArticleModel();
    $ret = $mArticle->edit(['sort'=>$sort], ['id'=>$id], 'none');
    die(json_encode(['status'=>'success', 'msg'=>'操作成功！', 'data'=>[]]));
}

4、代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>datagrid 表格数据填充方式</title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<!-- 引入easyui -->
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
		<script src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	</head>
	<body>
		
		<h2>排序编辑</h2>
		
		<table id="js_set_easyuiTable" class="easyuiTable" toolbar="#search_id"></table> <!-- search_id：datagrid绑定的搜索框；js_set_easyuiTable：根据此ID用Jquery给该表格赋值 -->
	
	</body>
</html>
 
<script>
	var tableData = [{"id":1,"name":"阿猫","sex":"1","sort":100},{"id":2,"name":"阿狗","sex":"2","sort":100},{"id":3,"name":"阿猪","sex":"0","sort":105}];
	//js填充表格数据
	$('#js_set_easyuiTable').datagrid({
		nowrap:false,//自动换行
		width:'700px',
		height:'auto',
		singleSelect:true,
		//fit:true,// 自适应父容器
		//animate:true,//定义当节点展开或折叠时是否显示动画效果
		pagination:'true',
		pageSize:10,
		pageList:[10,20,50],
		loadMsg:'请稍候,正在加载数据...',
		//url:'/setting/gift/index',	//url请求后台数据，我在这里为了演示暂时写死
		data:tableData,
		rownumbers: true,//显示行数
		columns:[[
			{field:'id',title:'',align:'center',hidden:true},
			{field:'name',title:'姓名',align:'left',width:200},
			{field:'sex',title:'性别',align:'center',width:'20%',sortable:true,
				formatter:function( val , rowData, rowIndex ){	//val:当前参数 sex的值；row
					var color = sexStr = '';
					if(val==0){	//等价于 rowData.sex==0
						color = 'green';
						sexStr = '保密';
					}else if(val==1){
						color = 'red';
						sexStr = '男';
					}else if(val==2){
						color = 'blue';
						sexStr = '女';
					}
					return '<span style="color:'+color+'">'+sexStr+'</span>';
				}
			},
			{field:'sort',title:'排序',align:'center',width:'125px',sortable:true,editor:'numberbox'},
		]],
		onLoadSuccess:function(data){  },
		onClickCell: onClickCell,
		onAfterEdit:function (index, row, changes) {//编辑确认之后后台操作	//3 object{id:1,title:'你好'...} object(sort:'103')
			$.ajax({
				url : '/index/index/test',	//这里写上有效的请求地址，然后在后台操作即可
				type:'post',
				data:{id:row.id,sort:row.sort}, //额外的参数
				dataType: "json",//响应结果为文本
				success:function (data) { 
					if(data.status=='success'){
						$('#js_set_easyuiTable').datagrid('reload');	//修改一次刷新一次表格
					}
				}
			});
		}
	});
	
//START
$.extend($.fn.datagrid.methods, {
	editCell: function(jq,param){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor1 = col.editor;
				if (fields[i] != param.field){
					col.editor = null;
				}
			}
			$(this).datagrid('beginEdit', param.index);
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor = col.editor1;
			}
		});
	}
});

var editIndex = undefined;
function endEditing(){
	if (editIndex == undefined){return true}
	if ($('#js_set_easyuiTable').datagrid('validateRow', editIndex)){
		$('#js_set_easyuiTable').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickCell(index, field){
	if (endEditing()){
		$('#js_set_easyuiTable').datagrid('selectRow', index)
				.datagrid('editCell', {index:index,field:field});
		editIndex = index;
	}
}
//END
	
</script>
<!-- PHP后台编辑排序方法 -->
<!--
function testAction(){
	$id = $_POST['id'];
	$sort = $_POST['sort'];
	$mArticle = new ArticleModel();
	$ret = $mArticle->edit(['sort'=>$sort], ['id'=>$id], 'none');
	die(json_encode(['status'=>'success', 'msg'=>'操作成功！', 'data'=>[]]));
}
-->

datagrid编辑单元格中的内容

相关推荐