心得及踩坑总结（1）"/>
miniUI的增删查改操作心得及踩坑总结（1）
这是我在实习公司做的一个小Demo，说明了miniUI企业型前端框架表格表单中的一些小问题。仅供一些像我一样的初学者借鉴，一起学习。
（注：此项目里的操作均为本地数据，没有涉及Ajax，所以请看清前提再借鉴学习。）
项目说明：制作一个表格，包括增删查改功能，年龄小于23岁的数据行用红色标记。删除和查找操作在本页面执行，添加和编辑功能弹出子页面执行。
界面展示（在chrome浏览器下）：
具体操作：
（1）不选中数据行的情况下，点击删除
（3）选中id=4的记录，点击删除
（4）点击确定，会删除记录，页面不会刷新
（5）点击添加，弹出子页面（注：此处的手机号码是miniUI校验的一个正则表达式测试用例，数据不会传到父页面）
（6）添加信息
（7）点击取消数据则不会保存，点击确定出现如下页面，出现新添加的数据
（8）选中一条数据后，点击编辑按钮，若是不选择数据，则出现第（1）步的情况。这里我们选择id=3的数据行
这里的id我设置的是不可编辑状态，为了方便观察，我们改变数据行的年龄值，使其大于23看看颜色是否发生变化。
（9）
（10）点击取消则不会保存修改，点击确定，我们看到数据行从红色变为黑色，编辑成功
（11） 名字的模糊查询
（12）根据年龄过滤数据行
上传代码给大家看一下，写的不好多多指教。我是直接把js代码写在了<script>标签里，后来懒得改了，大家不要学习我这种坏习惯。一共两个文件 ：
主页面 mini_table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd"><html xmlns="">
<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) != -1r1 = 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);elsewindow.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>一些遇到的坑在下一篇跟大家分享哦~~~
一些遇到的坑在下一篇跟大家分享哦~~~
一些遇到的坑在下一篇跟大家分享哦~~~
更多推荐
miniUI的增删查改操作心得及踩坑总结（1）
发布评论