miniUI的增删查改操作心得及踩坑总结（1）
这是我在实习公司做的一个Demo，总结了miniUI企业型前端框架表格表单中的一些小问题。仅供一些像我一样的初学者借鉴，一起学习。
（注：此项目里的操作均为本地数据，没有涉及Ajax，所以请看清前提再借鉴学习。）
项目说明：制作一个表格，包括增删查改功能，年龄小于23岁的数据行用红色标记。删除和查找操作在本页面执行，添加和编辑功能弹出子页面执行。
界面展示（在chrome浏览器下）：
具体操作：
（1）不选中数据行的情况下，点击删除
（2）选中id=4的记录，点击删除
（3）点击确定，会删除记录，页面不会刷新
（4）点击添加，弹出子页面（注：此处的手机号码是miniUI校验的一个正则表达式测试用例，数据不会传到父页面）
（5）添加信息
（6）点击取消数据则不会保存，点击确定出现如下页面，出现新添加的数据
（7）选中一条数据后，点击编辑按钮，若是不选择数据，则出现第（1）步的情况。这里我们选择id=3的数据行
这里的id我设置的是不可编辑状态，为了方便观察，我们改变数据行的年龄值，使其大于23看看颜色是否发生变化。
（8）
（9）点击取消则不会保存修改，点击确定，我们看到数据行从红色变为黑色，编辑成功
（10） 名字的模糊查询
（11）根据年龄过滤数据行
主页面 mini_table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mini_table</title>
<meta charset="UTF-8">
<script src="miniui/jquery.min.js"></script>
<link rel="stylesheet" href="miniui/themes/default/miniui.css">
<link rel="stylesheet" href="miniui/themes/icons.css">
<script src="miniui/miniui.js"></script>
<style>
#table{
top: 50%;
left: 50%;
position: absolute;
margin-top: -150px;
margin-left: -400px;
}
.red{
color:red;
}
</style>
</head>
<body>
<div id="table">
<div id="buttons" style="width: 800px">
<a class="mini-button" iconCls="icon-remove" onclick="deleteRow()">删除</a>
<a class="mini-button" iconCls="icon-add" onclick="addTable()">添加</a>
<a class="mini-button" iconCls="icon-edit" onclick="editRow()">编辑</a>
<input id="nameFilter" property="filter" class="mini-textbox" style="width: 150px;;"
onvaluechanged="onFilterChanged" emptyText="过滤名字关键字" />
<input id="ageFilter" property="filter" class="mini-filteredit" filterData="ageFilters" style="width:150px;"
onvaluechanged="onFilterChanged" emptyText="过滤年龄" showClose="true"/>
</div>
<div id="datagrid1" class="mini-datagrid" idField="id" allowResize="false">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var Genders = [{ id: 1, text: '男' }, { id: 0, text: '女'}];
var ageFilters = [{ text: '大于', value: '>' }, { text: '小于', value: '<' }, { text: '等于', value: '=='}]
mini.parse();
var grid = mini.get("datagrid1");
var items=[
{field:"id",width:"30",headerAlign:"center",align:"center",allowSort:"true",header:"id"},
{field:"name",width:"120",headerAlign:"center",align:"center",allowSort:"true",showCellTip:"false",header:"姓名"},
{field:"gender",type: "comboboxcolumn",width:"100",renderer:"onGenderRenderer",align:"center",headerAlign:"center",header:"性别",editor:{type:"combobox",data:Genders}},
{field:"age",headerAlign:"center",width:"100",allowSort:"true",align:"center",header:"年龄",editor:{type:"spinner"}},
];
//动态添加定义的列
grid.set({style:"width:800px;height:300px;", allowCellEdit:"true", allowCellSelect:"true",
columns:items
});
var arr=[
{id:1,name:"王力坤",gender:1,age:28},
{id:2,name:"周大宝",gender:1,age:19},
{id:3,name:"李小明",gender:0,age:21},
{id:4,name:"张博涵",gender:0,age:23},
{id:5,name:"李程程",gender:1,age:19},
{id:6,name:"刘洋龙",gender:0,age:25},
{id:7,name:"杨逍一",gender:1,age:22},
{id:8,name:"范志强",gender:1,age:26},
{id:9,name:"郝兄弟",gender:0,age:18},
{id:10,name:"张志鹏",gender:1,age:25},
];
//性别渲染器
function onGenderRenderer(e) {
for (var i = 0, l = Genders.length; i < l; i++) {
var g = Genders[i];
if (g.id == e.value) return g.text;
}
return "";
};
//删除选中行
function deleteRow(){
var rows=grid.getSelecteds();
if(rows.length>0){
mini.confirm("确定删除记录？","警告",function(action){//confirm返回Boolean,mini.confirm()返回警告框，必须加回调函数
if(action=="ok"){
grid.removeRows(rows);
}
})
}else{
mini.alert("请选中一条记录");
}
};
//弹出子页面添加一条数据
function addTable(){
mini.open({
targetWindow: window,url:"add_table.html",title:"新增记录",width:600,height:200,showMaxButton: true,
onload: function () {
var iframe = this.getIFrameEl();
},
ondestroy: function (action) {
if(action=="ok"){
var iframe = this.getIFrameEl();
var add_data = iframe.contentWindow.GetData();
$.extend(true,add_data,add_data);//add_data=mini.clone(add_data);
arr.push(add_data);
grid.setData(arr);
}
}
})
};
//编辑选中行，id不能修改
function editRow(){
var row=grid.getSelected();
if(row){
mini.open({
targetWindow:window,url:"add_table.html",title:"修改信息",width:600,height:200,showMaxButton:true,
onload:function(){
var iframe = this.getIFrameEl();
var data = {action: "edit",edit_item:row};
iframe.contentWindow.SetData(data);
},
ondestroy:function(action){
if(action=="ok"){
var iframe=this.getIFrameEl();
var edit_data=iframe.contentWindow.GetData();
$.extend(true,edit_data,edit_data);
grid.updateRow (row,edit_data);
}
}
})
}else{
mini.alert("请选中一条记录");
}
};
//向表格传本地数据
grid.setData(arr);
//年龄<23的行设置为红色
grid.on("drawcell",function(e){
var record=e.record;
if(record.age<23){
e.rowStyle="color:red" ;
}
});
//模糊查询和过滤年龄小于输入框里的记录
function onFilterChanged(e) {
var namebox = mini.get("nameFilter");
var agebox = mini.get("ageFilter");
var name = namebox.getValue().toLowerCase();
var age = parseInt(agebox.getValue().toLowerCase());
var ageFilter = agebox.getFilterValue().toLowerCase();
grid.filter(function (row) {
var r1 = true;
if (name) {
//有关键字即可查询，精准查询为String(row.name).toLowerCase().indexOf(name) != -1
r1 = String(row.name).indexOf(name) != -1;
return r1;
}
var r2 = true;
if (!isNaN(age) && ageFilter) {
r2 = false;
if (ageFilter == ">" && row.age > age) r2 = true;
if (ageFilter == "<" && row.age < age) r2 = true;
if (ageFilter == "==" && row.age == age) r2 = true;
}
return r1 && r2;
});
}
</script>
弹出页面 add_table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>add_table</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="miniui/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="miniui/themes/default/miniui.css" />
<link rel="stylesheet" href="miniui/themes/icons.css">
<script src="miniui/miniui.js"></script>
</head>
<body>
<form id="form1">
<fieldset style="border:solid 1px #aaa;padding:3px;">
<legend >基本信息</legend>
<div style="padding:5px;">
<table>
<tr>
<td style="width:80px;">id:</td>
<td style="width:150px;">
<input name="id" class="mini-textbox" required="true"/>
</td>
<td style="width:80px;">姓名:</td>
<td style="width:150px;">
<input name="name" class="mini-textbox" required="true"/>
</td>
</tr>
<tr>
</td>
<td style="width:80px;">性别:</td>
<td >
<input name="gender" class="mini-combobox" value="" data= [{"id":"1","text":"男"},{"id":"0","text":"女"}] required="true" />
</td>
<td >年龄:</td>
<td >
<input name="age" class="mini-spinner" value="" minValue="0" maxValue="200" required="true"/>
</td>
</tr>
<tr>
<td style="width: 80px">手机号码:</td>
<td style="width: 150px">
<input id="phoneNumber" name="phoneNumber" class="mini-textbox" onvalidation="onIsPhonenumberAllow" required="true"/>
</td>
</tr>
</table>
</div>
</fieldset>
<div style="text-align:center;padding:10px;">
<a class="mini-button" onclick="onOk" style="width:60px;margin-right:20px;">确定</a>
<a class="mini-button" onclick="onCancel" style="width:60px;">取消</a>
</div>
</form>
</body>
</html>
<script type="text/javascript">
mini.parse();
var form = new mini.Form("form1");
function GetData() {
var o = form.getData();
return o;
}
function SetData(data){
var fields = form.getFields();
var c=fields[0];
if(data.action="edit"){
data=$.extend(true,data,data);
if(c.setReadOnly){ //设置控件只读
c.setReadOnly(true);
}
form.setData(data.edit_item);
}
}
//关闭子页面
function closeWindow(action) {
if (window.CloseOwnerWindow)
return window.CloseOwnerWindow(action);
else
window.close();
}
function onOk() {
closeWindow("ok");
}
function onCancel() {
closeWindow("cancel");
}
//校验以1开头的标准手机号码
function onIsPhonenumberAllow(e) {
var reg= /^1[34578]\d{9}$/;
if (e.isValid) {
if (reg.test(e.value) == false) {
e.errorText = "请输入正确的手机号码!";
e.isValid = false;
}
}
}
</script>
浙公网安备 33010602011771号