Webix 常用控件使用实例

原文及更多教程请查看：
http://fire.lvzmen.cn/index.php?app=article&ac=show&id=3
1、文本框

示例默认条件：不能为空，不大于64个字符，出错提示（红色字体，红色文本边框）

{
id: “add_frame_name”,
name: “frame_name”,
view: “text”,
label: “框架名称：”,
labelWidth: 150,
width: 450,
inputWidth: 450,
required: true,
attributes: {maxlength: 64}
validate:webix.rules.isNotEmpty,
invalidMessage: “框架名称不能为空”
}
2、多选框

多选，可以在弹出的列表框中多选选项。

{
id: “add_frame_company”,
name: “company_name”,
view: “multicombo”,
label: “关联分公司：”,
labelWidth: 150,
width: 450,
inputWidth: 450,
options: {
body: {
yCount: 5
}
}
//在页面初始化的时候加载下面代码
ajaxpost(‘/list/index/company?limit=true’, function (response) {
response = JSON.parse(response);
insertDataToList(‘add_frame_company’, response.data);
});
}
3、列表框

{

   id: "add_frame_supplier",
   name: "supplier_name",
   view: "combo",
   label: "供应商：",
   labelWidth: 150,
   width: 450,
   inputWidth: 450,
   options: {
       body: {
           yCount: 5
       }
   }
        ajaxpost('/list/index/supplier?limit=true', function (response) {
            response = JSON.parse(response);
            insertDataToList('add_frame_supplier', response.data);
        });

}
4、起止时间

{
cols: [
{
label: “起止时间:”,
labelWidth: 150,
view: “datepicker”,
id: “start_time”,
width: 300,
required: true,
format: “%Y-%m-%d”
},
{
label: “-“,
labelWidth: 20,
view: “datepicker”,
id: “end_time”,
width: 150,
format: “%Y-%m-%d”
}
]
},

//起始时间不能为空
if(

$$("start_time").getValue() == null){$$ (“start_time”).focus();
alert(“起始时间不能为空”);
return false;
}
5、数字输入框

必须为数字，可以为负数，也可以有小数点，在点击提交时通过form.validate()函数进行校验。

{
id: “add_frame_limit_days”,
name: “limit_days”,
view: “text”,
label: “账期：”,
labelWidth: 150,
width: 450,
inputWidth: 450,
required: true,
validate:webix.rules.isNumber,
on:{
“onChange”:function(){
this.validate();
}},
invalidMessage: “账期必须为数字！”
},

6、列表

{
view: “treetable”, id: ‘datatable’,
select: true,
columns: [
{id: “order”, header: “序号”, width: 50, fillspace: true},
{id: “frame_name”, header: “框架名称”, width: 150, fillspace: true},
{id: “supplier_name”, header: “供应商”, width: 300, fillspace: true},
{id: “start_time_char”, header: “起始日期”, width: 150, fillspace: true},
{id: “end_time_char”, header: “结束日期”, width: 150, fillspace: true},
{id: “contract_number”, header: “合同编号”, width: 150, fillspace: true},
{id: “status”, header: “状态”, width: 150, fillspace: true},
{id: “operate”, header: “操作”, width: 150, fillspace: true},
{id: “frame_id”, hidden: true}
]
},

//列表不能为空
var site_list_length = $$(“datatable”).count();
if(site_list_length == 0){
alert(“必须至少选择一个站点！”);
}