MINIUI 表格内修改及各控件使用

最新推荐文章于 2024-05-22 13:30:53 发布

快乐的小狮子

最新推荐文章于 2024-05-22 13:30:53 发布

阅读量1.9w

点赞数

分类专栏： miniui

本文链接：https://blog.csdn.net/Leos618/article/details/80075983

版权

miniui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表格界面整体展示

1、功能介绍：

1、实现后台的数据库显示到前端datagrid表格界面

2、实现数据表格的分页操作

3、实现上端datagrid表格与下端editForm表格的数据绑定

4、实现视图内的数据新增、删除、保存功能

5、实现视图数据的斑马纹显示

6、通过点击最上端的两个勾选框，对数据表修改表格横竖线

7、选中一条数据，点击“上移”“下移”按钮实现数据位置的移动

8、选中一列进行数据列的锁定和取消锁定

9、在视图中对单行数据进行修改，头行编号属性锁定为不可修改，剩余属性为可修改，修改后属性添加标记

10、“国家”一列属性为下拉选择框

具体代码见具体代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<title>公共页面</title>

<script th:src="@{/miniuinew/boot.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/test.js}" type="text/javascript"></script>
<style type="text/css">
a {
	text-decoration: none;
}
</style>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.mini-fit {
	width: auto;
	overflow: auto;
	position: relative;
	margin-left: 10px;
	margin-right: 14px;
}
</style>

</head>
<body>
	<h1>研究datagrid表格修改及各控件使用</h1>
	<div style="margin-bottom: 8px;">
		<input type="checkbox" id="hline"
			οnclick="setShowGridHLine(this.checked)" /><label for="hline">横向表格线</label>
		<input type="checkbox" id="vline" checked
			οnclick="setShowGridVLine(this.checked)" style="margin-left: 25px;" /><label
			for="vline">竖向表格线</label>
	</div>
	<div style="padding-bottom:5px;">
                    
        <input type="button" value="上移" οnclick='moveUp()'/>
        <input type="button" value="下移" οnclick='moveDown()'/>
        
        <input type="button" value="取消锁定" οnclick="unfixColumns()"/>
        <input type="button" value="锁定列" οnclick="fixColumns()"/>
      
    </div>
	<div style="width: 100%;">
		<div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
			<table style="width: 100%;">
				<tr>
					<td style="width: 100%;"><a class="mini-button"
						iconCls="icon-add" οnclick="addRow()" plain="true">增加</a> <a
						class="mini-button" iconCls="icon-remove" οnclick="removeRow()"
						plain="true">删除</a> <span class="separator"></span> <a
						class="mini-button" iconCls="icon-save" οnclick="saveData()"
						plain="true">保存</a></td>

				</tr>
			</table>
		</div>
	</div>
	<div id="editgrid" class="mini-datagrid"
		style="width: 100%; height: 60%;" allowResize="true" url="/getAll"
		idField="id" allowCellEdit="true" allowCellSelect="true"
		editNextOnEnterKey="true" editNextRowCell="true" navEditMode="true"
		sizeList="[10,10,10,10]" pageSize="10" allowCellValid="true"
		oncellvalidation="onCellValidation" showColumnsMenu="true"
		allowAlternating="true">
		<div property="columns">
			<div name='indexcolumn' type='indexcolumn' width='25'></div>
			<div name='checkcolumn' type='checkcolumn' width='20'></div>
			<div field="code" width="120" headerAlign="center" allowSort="true"
				hideable="true">
				代码编号 <input property="editor" class="text" minValue="1001"
					maxValue="9999" value="1001" style="width: 100%;" />
			</div>
			<div field="name" width="120" headerAlign="center" allowSort="true">
				站点名 <input id="name" property="editor" class="mini-textbox"
					style="width: 100%;" minWidth="100%" />
			</div>

			<div field="effect_flag" width="120" headerAlign="center"
				allowSort="true">
				效率标识 <input property="editor" class="mini-textbox"
					style="width: 100%" minWidth="100%" />
			</div>

			<div field="create_time" width="100" headerAlign="center"
				dateFormat="yyyy-MM-dd" allowSort="true">
				创建日期 <input property="editor" class="mini-datepicker"
					style="width: 100%" minWidth="100%" />
			</div>
			<!--ComboBox：远程数据-->
			<div type="comboboxcolumn" field="country" width="100"
				headerAlign="center">
				国家 <input property="editor" class="mini-combobox"
					style="width: 100%;" url="../data/countrys.txt" />
			</div>
			<div type="checkboxcolumn" field="finished" trueValue="1"
				falseValue="0" width="60" headerAlign="center">是否完成</div>
		</div>
	</div>
	<fieldset
		style="width: 100%; border: solid 1px #aaa; margin-top: 8px; position: relative;">
		<legend>项目详细信息</legend>
		<div id="editForm1" style="padding: 5px;">
			<input class="mini-hidden" name="id" />
			<table style="width: 100%;">
				<tr>
					<td style="width: 80px;">站点编号：</td>
					<td style="width: 150px;"><input id="code" name="code"
						class="mini-textbox" /></td>
					<td style="width: 80px;">站点名称：</td>
					<td style="width: 150px;"><input id="name" name="name"
						class="mini-textbox" /></td>
					<td style="width: 80px;">效率标识：</td>
					<td style="width: 150px;"><input name="effect_flag"
						class="mini-textbox" /></td>
				</tr>
				<tr>
					<td>创建日期：</td>
					<td><input id="create_time" name="create_time"
						class="mini-combobox" /></td>
					<td>国家：</td>
					<td><input id="country" name="country" class="mini-combobox" /></td>
				</tr>
			</table>
		</div>
	</fieldset>
</body>
</html>

$(function() {
	mini.parse();
	var grid = mini.get("editgrid");
	grid.load();
	grid.sortBy("code", "desc");
	// 绑定表单
	var db = new mini.DataBinding();
	db.bindForm("editForm1", grid);
})

// 添加一行数据
function addRow() {
	var grid = mini.get("editgrid");
	var newRow = {
		code : "New Project"
	};
	grid.addRow(newRow, 0);
	grid.validateRow(newRow); // 加入新行马上验证
}

// 克隆一条数据
function cloneRow() {
	var grid = mini.get("editgrid");
	var row = grid.getSelected();
	if (row) {
		var newRow = mini.clone(row);
		delete newRow.id;

		SaveRow(newRow);
	} else {
		alert("请选选择一条记录");
	}
}
// 数据行的上移下移
function moveUp() {
	var grid = mini.get("editgrid");
	var row = grid.getSelected();
	if (row) {
		var index = grid.indexOf(row);
		grid.moveRow(row, index - 1);
	} else {
		alert("请选选择一条记录");
	}
}
function moveDown() {
	var grid = mini.get("editgrid");
	var row = grid.getSelected();
	if (row) {
		var index = grid.indexOf(row);

		grid.moveRow(row, index + 2);
	} else {
		alert("请选择一套记录");
	}
}
// 锁定列和取消锁定
function unfixColumns() {
	var grid = mini.get("editgrid");
	grid.unFrozenColumns();
}
function fixColumns() {
	var grid = mini.get("editgrid");
	grid.frozenColumns(0, 1);
}

// 删除一行数据
function removeRow() {
	var grid = mini.get("editgrid");
	var rows = grid.getSelecteds();
	if (rows.length > 0) {
		grid.removeRows(rows, true);
	}
}
// 数据保存
function saveData() {
	grid.validate();
	if (grid.isValid() == false) {
		// alert("请校验输入单元格内容");
		var error = grid.getCellErrors()[0];
		grid.beginEditCell(error.record, error.column);
		return;
	}
	var data = grid.getChanges();
	var json = mini.encode(data);
	grid.loading("保存中，请稍后。。。");
	$.ajax({
		url : "/savedata",
		type : "post",
		contentType : "application/json;charset=utf-8",
		data : json,
		dataType : "json",
		success : function(text) {
			grid.setData(text);
		}
	});
}
// 当输入域发生改变时改变颜色
$(document).ready(function() {
	$(".mini-textbox").change(function() {
		$(this).css("background-color", "#FFFFCC");
	});
});
// 添加横竖线效果
function setShowGridHLine(checked) {
	var grid = mini.get("editgrid");
	grid.setShowHGridLines(checked);
}
function setShowGridVLine(checked) {
	var grid = mini.get("editgrid");
	grid.setShowVGridLines(checked);
}

function onCellValidation(e) {
	// 对输入框的值进行筛选
	if (e.field == "effect_flag") {

		if (e.value != 'Y') {
			e.isValid = false;
			e.errorText = "不能设置为其他";
		}
	}
	if (e.field == "name") {
		if (e.value == 0) {
			e.isValid = false;
			e.errorText = "不能为空";
		}
	}
	if (e.field == "country") {
		if (e.value == 0) {
			e.isValid = false;
			e.errorText = "可以忽略项";
		}
	}
	if (e.field == "create_time") {
		if (e.value == 0) {
			e.isValid = false;
			e.errorText = "不能为空";
		}
	}

}

快乐的小狮子

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
MINIUI 表格内修改及各控件使用

表格界面整体展示1、功能介绍：1、实现后台的数据库显示到前端datagrid表格界面2、实现数据表格的分页操作3、实现上端datagrid表格与下端editForm表格的数据绑定4、实现视图内的数据新增、删除、保存功能5、实现视图数据的斑马纹显示 6、通过点击最上端的两个勾选框，对数据表修改表格横竖线 7、选中一条数据，点击“上移”“下移”按钮实现数据位置的移动 8、...
复制链接

扫一扫