datagrid编辑单元格中的内容

datagrid 编辑单元格中的内容

1、在 datagrid 表格数据填充方式 基本表格二的基础上修改

2、效果图

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的值；rowvar color = sexStr = '';if(val==0){    //等价于 rowData.sex==0color = '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编辑单元格中的内容相关推荐

Swift - 可编辑表格样例（可直接编辑单元格中内容、移动删除单元格）
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容. ...
excel对同一个单元格中的内容去重
1.新建一个excel文件. 2.首先调出开发工具,如下图所示: 3.将开发工具打上对钩,如下图所示: 4.此时会多出一个开发工具tab,如下图所示: 5.选择Visual Basic,如下图所示: ...
如何自定义格式，使单元格中的内容更改颜色？
Question: excel单元格有自定义格式的功能,可以将单元格中的内容更改颜色. 下面有2个问题: 1. 如何设置,使单元格中的字变颜色?比如,当单元格中的数字大于100时,要求该数字变为红色. ...
将单元格中的内容拆分成多列/行
例如:将单元格A1中数据(2.1,2.8,3.3,3.5,4.6,5.4,3.9,10.1)拆到多个单元格中,以逗号为分割点,做法如下: 选中单元格数据-分列-分隔符号-下一步-逗号-下一步-完成 ...
单元格中指定内容标红_按照指定单元格内容进行拆分，想怎么拆就怎么拆
前景提要好了今天我们来继续玩一下工作表的拆分,之前我们已经尝试了用指定列,指定行的方式来进行工作表的拆分,不知道有没有点燃小伙伴们的拆分热潮呢?之前我在写按照工作表的指定行数进行拆分的时候,就想到一 ...
datagrid编辑单元格回车换行_Silverlight的DataGrid实现列标题和单元格换行
silverlight的DataGrid控件默认就是单行文本到头,如果设置了列的长度,文本会被截断不显示.如何实现长文本自动换行?我们首先想到的是利用Style,因为换行只是外观的改变,不是行为的改变 ...
EXCEL--：将多个单元格中的内容合并到一个单元格中
1.=A2&B2&C2 2.=A2&"."&B2&"."&C2 备注: 1.第一种是直接将内容放到一起. 2.第 ...
datagrid编辑单元格回车换行_使用EasyUI的Datagrid的Editor进行行编辑，Enter回车结束编辑，并开启新的一行。...
//新增数据 function add() { if (Index == undefined) { row = { move_date: '', start_time: '', end_time: ' ...
java 使用poi导出excel单元格中的内容自动换行
HSSFCellStyle cellStyle = wb.createCellStyle();cellStyle.setWrapText(true); //文本内容自动换行
datagrid编辑单元格回车换行_DataGridView单元格换行(WrapMode)
dgv.DefaultCellStyle.WrapMode = True dgv.RowTemplate.DefaultCellStyle.WrapMode= True dgv.Columns(0). ...

datagrid编辑单元格中的内容

datagrid编辑单元格中的内容相关推荐

最新文章

热门文章