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

表格界面整体展示

1、功能介绍：

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

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

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

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

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

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

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

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

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

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

具体代码见具体代码：

	
研究datagrid表格修改及各控件使用
	

		横向表格线
		竖向表格线
	
	

                    
        
        
        
        
        
      
    
	

		

			

				

					
增加 删除  保存

				
			
		
	
	

		

			

			

			

				代码编号 
			
			

				站点名 
			

			

				效率标识 
			

			

				创建日期 
			
			
			

				国家 
			
			
是否完成
		
	
	

		
项目详细信息
		

			
			

				

					
站点编号：
					

					
站点名称：
					

					
效率标识：
					

				
				

					
创建日期：
					

					
国家：
					

				
			
		
	

$(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 = "不能为空";
		}
	}

}