# xView
**Repository Path**: lxr182/xView
## Basic Information
- **Project Name**: xView
- **Description**: 一个用于改善页面数据交互的工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 3
- **Forks**: 0
- **Created**: 2018-10-05
- **Last Updated**: 2024-11-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# xView
### 项目介绍
1. xView强调运算数据和视图数据，就好比select中的option标签的value和里面的html一个用来处理运算，一个用来展示
2. xView以组件为单位处理数据，一个div可以是一个组件，一个div里面有多个div它也是一个组件，所以理论上可以把所有插件纳入到xView的管理范围
3. xView 标签x-view，x-name，data-view
- x-view组件的id，可以自定义适配其他插件
- x-name组件的属性名
- data-view 视图数据和运算数据转换规则，可以自行定义
4. xView有几个主要函数setModel，getModel，setForm，getForm，val
- xView.setModel(group,model):对选中的区域进行赋值
- xView.getModel(group):返回对应区域的模型值
```
$(function(){
//设置页面数据
xView.setModel($("#model"), {
a: {
time1: 34234325450//时间戳
},
time2: 1,
b: 1
});
//获取区域模型值
console.log(xView.getModel($("#model")));
})
```
- xView.setForm(form,model):设置表单值
- xView.getForm(form):获取表单值
```
取出form的值：
```
- xView.val(widget,[val]):获取或设置组件值，其实和jquery基本一样
5. 自定义组件，例如选择员工的应用场景，后台要得到的只有员工id，员工名字只是用来展示的，这里可以看成一个组件，员工id是运算数据，员工名称是视图数据
```
//自定义mySelect组件
xView.widget.mySelect = {
setView: function(e, val, fmt) {
$(e).find(".view-input").val(val.name);
$(e).find(".view-input").attr("data-id",val.id);
},
getData: function(e) {
return $(e).find("view-input").attr("data-id");
}
}
```
使用的时候
```
//询问框
function selectMan(){
layer.confirm('', {
btn: ['确定','取消'] //按钮
}, function(i){
layer.close(i)
//模拟获取到的员工数据
var item = {name:"张三",id:"1"}
alert("选中了："+tiem.name);
xView.val($("#mySelect"),item);
},function(){});
}
自定义组件
```