easyui datagrid editgrid 可编辑datagrid(8)

最新推荐文章于 2023-04-15 11:13:20 发布

yb305小白

最新推荐文章于 2023-04-15 11:13:20 发布

阅读量762

点赞数

分类专栏： easyui 文章标签： easyui editgrid

本文链接：https://blog.csdn.net/yb305/article/details/65631064

版权

easyui 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.源码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可编辑的datagrid</title>
    <link rel="stylesheet" href="./css/login.css"/>
    <link rel="stylesheet" type="text/css" href="./../js/easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="./../js/easyui/themes/icon.css">
	<script type="text/javascript" src="./../js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="./../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="./../js/easyui/locale/easyui-lang-zh_CN.js"></script>
 
    <style>
        html,body{width:100%;}
    </style>

</head>
<body>
<div id="dd" style="height:400px;"></div>
<script type="text/javascript">
$(function () {
	var datagrid; //定义全局变量datagrid
	var editRow = undefined; //定义全局变量：当前编辑的行
	datagrid = $("#dd").datagrid({
			url :"./action", //请求的数据源
			iconCls : 'icon-save', //图标
			pagination : true, //显示分页
			pageSize : 15, //页大小
			pageList : [ 15, 30, 45, 60 ], //页大小下拉选项此项各value是pageSize的倍数
			fit : true, //datagrid自适应宽度
			fitColumn : false, //列自适应宽度
			striped : true, //行背景交换
			nowap : true, //列内容多时自动折至第二行
			border : false,
			idField : 'ID', //主键
			columns : [ [//显示的列
			{
				field : 'ID',
				title : '编号',
				width : 100,
				sortable : true,
				checkbox : true
			}, {
				field : 'itemType',
				title : '用户名',
				width : 100,
				sortable : true,
				editor : {
					type : 'validatebox',
					options : {
						required : true
					}
				}
			}, {
				field : 'RealName',
				title : '状态',
				width : 100,
				formatter:function(value,row){
					if(value==undefined){
						return "正常";
					}else{
						if(value=="1"){
							return "异常";
						}else{
							return "正常";
						}
					}
				},
				editor:{
					type:'combobox',
					options:{
						valueField:'itemResult',
						textField:'itemResultContent',
						data:[{"itemResult":"1","itemResultContent":"异常"},{"itemResult":"0","itemResultContent":"正常"}],
						required:true
					}
				}
			}, {
				field : 'Email',
				title : '邮箱',
				width : 100,
				editor : {
					type : 'validatebox',
					options : {
						required : true
					}
				}
			} ] ],
			queryParams : {
				"itemtype":"901",
				"taskid":"69"
			}, //查询参数
			toolbar : [{
				text : '添加',
				iconCls : 'icon-add',
				handler : function() {//添加列表的操作按钮添加，修改，删除等
					//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
					if (editRow != undefined) {
						datagrid.datagrid("endEdit",editRow);
					}
					//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
					if (editRow == undefined) {
						datagrid.datagrid("insertRow",{
									index : 0, // index start with 0
									row : {}
								});
						//将新插入的那一行开户编辑状态
						datagrid.datagrid("beginEdit",0);
						//给当前编辑的行赋值
						editRow = 0;
					}
				}
			},
			'-',
			{
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					//删除时先获取选择行
					var rows = datagrid
							.datagrid("getSelections");
					//选择要删除的行
					if (rows.length > 0) {
						$.messager.confirm("提示","你确定要删除吗?",
							function(r) {
								if (r) {
									var ids = [];
									for (var i = 0; i < rows.length; i++) {
										ids.push(rows[i].ID);
									}
									//将选择到的行存入数组并用,分隔转换成字符串，
									//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
									alert(ids.join(','));
								}
							});
					} else {
						$.messager.alert("提示",
								"请选择要删除的行", "error");
					}
				}
			},
			'-',
			{
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
					datagrid.datagrid("endEdit",
							editRow);
				   alert("保存处理");
				}
			}, '-', {
				text : '取消编辑',
				iconCls : 'icon-redo',
				handler : function() {
					//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
					editRow = undefined;
					datagrid.datagrid("rejectChanges");
					datagrid.datagrid("unselectAll");
				}
			}, '-' ],
			onAfterEdit : function(rowIndex, rowData, changes) {
				//endEdit该方法触发此事件
				console.info(rowData);
				editRow = undefined;
			},
			onDblClickRow : function(rowIndex, rowData) {
				//双击开启编辑行
				if (editRow != undefined) {
					datagrid.datagrid("endEdit", editRow);
				}
				if (editRow == undefined) {
					datagrid.datagrid("beginEdit", rowIndex);
					editRow = rowIndex;
				}
			}
		});
	});
</script>
</body>
</html>

2.效果

yb305小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid editgrid 可编辑datagrid(8)

1.源码可编辑的datagrid html,body{width:100%;} $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量：当前编辑的行 datagrid = $("
复制链接

扫一扫