weui学习总结——表单相关控件

我是因为公司项目接触WeUI的，实话说刚开始的时候并不顺。我最先看的是jquery weui然后偶然发现了weui+。这两种都是在WeUI基础上的拓展，但我经过一段时间的使用，觉得简单的微信公众平台页面的开发还是使用WeUI更为方便。

那么我就来分享下我的学习体会：WeUI的官方简介说WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users.实际上它就是一个为微信开发量身定做的组件库。然而我不太理解网上真正按照官方文档和用官方组件库的并不多。这里先发一下官方文档链接：WeUI的GitHub地址，WeUI.js的GitHub地址。大家可以自行参考。

好，我正式开始我使用的组件的介绍和自己项目的分享了。

• 表单篇

1)picker(选择器)

这是我觉得比较美观和体验感好的选择器，jquery weui的select选择器实在让我感到违和。如果是固定值单列的选择器是比较简单的。1)第一个就是picker(选择器)
这是我觉得比较美观和体验感好的选择器，jquery weui的select选择器实在让我感到违和。如果是固定值单列的选择器是比较简单的。前台就是简单的input控件外面套个select箭头。Html:

<div class="weui-cell weui-cell_select" style="width: 100%;">
    <div class="weui-cell__hd">
    <label class="weui-form-preview__label">&nbsp;区域分划</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" name="select1" id="selectAdminarea" placeholder="请选择区域分划" readonly="readonly"></input>
    </div>
</div>

而js部分就是定义好label和value值后，我们的重点就是onChange(),onConfirm()，onClose()的方法了。js:

weui.picker([
    {
     label: '新成路街道',
     value: '310114001'
    }, {
     label: '真新街道',
     value: '310114002'
    }, {
     label: '菊园新区管委会',
     value: '310114001'
    }, {
     label: '嘉定镇街道',
     value: '310114002'
    }, {
     label: '南翔镇',
     value: '310114001'
    }, {
     label: '安亭镇',
     value: '310114103'
    }
   ], {
    defaultValue: ['310114001'],
    onChange: function (result) {
     // console.log(result);
    },
    onConfirm: function (result) {
     $("#selectAdminarea").val(result[0].label);
     selectArea = result[0].value;
     // console.log(selectArea);
    },
    id: 'selectAdminarea'
   });

注意点：因为你js的选择的值还需要赋值给你所需要赋值的地方即input框所以有必要在确认方法里加$("#inputId").val(选择的返回值)。
但如果我们需要把从后台获取数据绑定在选择框上呢？并且我们往往会有多级选择的情况出现，就比如地址的选择:城市->街镇那样

var resJson = new Array();
//ajax远程加载初始化问题类别下拉框选项 
myajax = $.ajax({
    url: rootUrl + "casetype/getCaseType",
    type: "get",
    contentType: "application/json",
    data: {
        "parentCodes": "1,2",
        "levelType": "2"
    },
    //traditional: true,  
    success: function(res) {