工作ui
Posted but-you
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了工作ui相关的知识，希望对你有一定的参考价值。
这是我在实习公司做的一个小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
-
-
-
<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
-
-
<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>
一些遇到的坑在下一篇跟大家分享哦~~~
以上是关于工作ui的主要内容，如果未能解决你的问题，请参考以下文章