/*! * WeX5 v3 (http://www.justep.com) * Copyright 2015 Justep, Inc. * Licensed under Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) * 文件名：demo.js */ define(function(require) { var $ = require("jquery"); var bind = require("bind"); var Data = require("../data"); var BizData = require("../bizData"); var Input = require("../../input/input"); var Output = require("../../output/output"); var Textarea = require("../../textarea/textarea"); // 增加自定义规则 Data.Rules.add('isExistStr', { // val：校验的值，params：规则给出的参数，ctx：当前的上下文，包含source（对应的data），rowid（行id），col(列名) validator : function(val, params, ctx) { var ret = false; if ('string' === typeof (val)) { ret = val.indexOf(params) > -1; } return ret; }, message : '必须包含字符 {0}' }); var Model = function() { this.callParent(); this.mainData = new Data(this, { xid : 'mainData', defCols : { SA_Task : { type : 'String', label : 'ID' }, sName : { type : 'String', label : '名字', rules : { required : { params : true, message : '名字必须有值' } } }, sAge : { type : 'Integer', label : '年龄' /* * , rules :{ min: {params:18, message:'年龄必须大于等于18' }, max: * {params:50, message:'年龄必须小于等于50' }} */ }, sAmt : { type : 'Double', label : '合计', relation : 'EXPRESS', calculate : "js:$model.slaveData?$model.slaveData.Sum('sAmt',$row):0" } }, idColumn : 'SA_Task' }); this.mainData.ageAvg = bind.computed(function() { var ret = this.mainData.Avg('sAge'); return ret; }, this).extend({ mustEqual : 30 }); this.mainData.amtSum = bind.computed(function() { var ret = this.mainData.Sum('sAmt'); return ret; }, this).extend({ mustEqual : 50 }); this.slaveData = new Data(this, { xid : 'slaveData', defCols : { SA_Task_Info : { type : 'String', label : '任务明细' }, SA_Task : { type : 'String', label : '主ID' }, sName : { type : 'String', label : '名字' }, sInfo : { type : 'String', label : '说明' }, sCount : { type : 'Integer', label : '数量', rules : { required : { params : true, message : '数量必须有值' }, integer : { params : true, message : '数量无效' } } }, sUnitprice : { type : 'Double', label : '单价', rules : { required : { params : true, message : '单价必须有值' }, number : { params : true, message : '单价无效' } } }, sAmt : { type : 'Double', label : '合计', relation : 'EXPRESS', rules : { calculate : "js:val('sCount') * val('sUnitprice')" } } }, idColumn : 'SA_Task_Info', master : { xid : 'mainData', relation : 'SA_Task' } }); this.bizDataReadonly = bind.observable(false);// 控制整个data的只读 this.bizData = new BizData(this, { xid : 'bizData', readonly : "js:$model.bizDataReadonly.get()", defCols : { DEMO_TABLE1 : { type : 'String', relation : 'DEMO_TABLE1', label : 'DEMO_TABLE1' }, fString : { type : 'String', relation : 'DEMO_TABLE1.fString', label : 'fString', // 上下文包括{$model:this.getModel(),$data:this,$row:r,$val,$rowID:rowid,$col:col} rules : { readonly : "js:500<val('fInteger')", required : { params : true, message : 'fString必须有值' }, isExistStr : 'abc', constraint : { params : { expr : "js:$val.indexOf(val('fInteger'))>-1" }, message : '通用规则，必须包含fInteger' } } }, fInteger : { type : 'Integer', relation : 'DEMO_TABLE1.fInteger', label : 'fInteger', rules : { required : { params : true, message : 'fInteger必须有值' }, number : { params : true, message : 'fInteger无效' } } }, fFloat : { type : 'Float', relation : 'DEMO_TABLE1.fFloat', label : 'fFloat', rules : { number : { params : true, message : 'fFloat无效' } } }, fDecimal : { type : 'Decimal', relation : 'DEMO_TABLE1.fDecimal', label : 'fDecimal' }, fDate : { type : 'Date', label : 'fDate', relation : 'DEMO_TABLE1.fDate' }, fDateTime : { type : 'DateTime', label : 'fDateTime', relation : 'DEMO_TABLE1.fDateTime' }, fTime : { type : 'Time', label : 'fTime', relation : 'DEMO_TABLE1.fTime' }, fText : { type : 'Text', label : 'fText', relation : 'DEMO_TABLE1.fText' }, version : { type : 'Integer', label : 'version', relation : 'DEMO_TABLE1.version' } }, idColumn : 'DEMO_TABLE1', dataModel : '/demo/components/data', queryAction : 'queryDEMO_TABLE1Action', newAction : 'createDEMO_TABLE1Action', saveAction : 'saveDEMO_TABLE1Action', limit : 5, autoLoad : true }); var self = this; this.bizChanged = bind.observable(false); this.bizData.on("onDataChange", function(event) { self.bizChanged.set(event.source.isChanged()); }); this.bizData.on("onSaveCommit", function(event) { self.bizChanged.set(event.source.isChanged()); }); this.bizDataDirectDelete = bind.observable(this.bizData.directDeleteMode); this.bizDataDirectDelete.subscribe(function(v) { self.bizData.directDeleteMode = v; }); this.bizDataDeleteConfirm = bind.observable(this.bizData.deleteConfirm); this.bizDataDeleteConfirm.subscribe(function(v) { self.bizData.deleteConfirm = v; }); this.input6Render = function(event) { event.text = event.value == '1' ? '男' : '女'; }; this.output6Render = function(event) { event.html = event.value == '1' ? '男' : '<span>output组件输出html：</span><input type="button" value="' + event.value + '"/>'; }; this.createInput = function() { var parent = this.getElementByXid("create-input"); if (parent) { var cfg = { 'bind-ref' : "bizData1.ref('fDateTime')", format : "yyyy-MM-dd hh:mm", parentNode : parent }; new Input(cfg); } else alert('error'); }; this.createOutput = function() { var parent = this.getElementByXid("create-output"); if (parent) { var cfg = { 'bind-ref' : "bizData1.ref('fText')", parentNode : parent }; new Output(cfg); } else alert('error'); }; this.createTextarea = function() { var parent = this.getElementByXid("create-output"); if (parent) { var cfg = { 'bind-ref' : "bizData1.ref('fText')", parentNode : parent }; new Textarea(cfg); } else alert('error'); }; }; Model.prototype.mainDataNew = function(defaultValue) { defaultValue = defaultValue || {}; this.mainData.newData({ defaultValues : [ { SA_Task : defaultValue['SA_Task'] || Data.UUID(), sName : defaultValue['sName'] || '', sAge : defaultValue['sAge'] || (Math.round(Math.random() * 40) + 20) } ] }); }; Model.prototype.slaveDataNew = function(defaultValue) { defaultValue = defaultValue || {}; this.slaveData.newData({ defaultValues : [ { SA_Task_Info : defaultValue['SA_Task_Info'] || Data.UUID(), sName : defaultValue['sName'] || (this.mainData.getValue('sName') + '---' + this.slaveData.getCount()), sCount : defaultValue['sCount'] || (Math.round(Math.random() * 150) + 30), sUnitprice : defaultValue['sUnitprice'] || (Math.round(Math.random() * 200) * 0.5), sInfo : defaultValue['sInfo'] || "无" } ] }); }; Model.prototype.test = function() { // 测试applyBindings速度 var t = "<div><label data-bind="text:bizData.label('fString')"></label><input data-bind="value:bizData.ref('fString')" /></div><div><label data-bind="text:bizData.label('fInteger')"></label><input data-bind="value:bizData.ref('fInteger')" /></div><div><label data-bind="text:bizData.label('fFloat')"></label><input data-bind="value:bizData.ref('fFloat')" /></div><div><label data-bind="text:bizData.label('fDecimal')"></label><input data-bind="value:bizData.ref('fDecimal')" /></div><div><label data-bind="text:bizData.label('fDateTime')"></label><input data-bind="value:bizData.ref('fDateTime')" /></div><div><label data-bind="text:bizData.label('fText')"></label><input data-bind="value:bizData.ref('fText')" /></div><div><label data-bind="text:bizData.label('fTime')"></label><input data-bind="value:bizData.ref('fTime')" /></div>"; var tt = ""; for ( var i = 0; i < 200; i++) // 创建200行数据 tt = tt + t; $('.tr').append("<td class='td1'>" + tt + "</td>"); var b1 = new Date(); bind.applyBindings(this, $('.td1')[0]); alert("applyBindings:" + ((new Date()).getTime() - b1.getTime())); }; Model.prototype.bizData1DataChange = function(event) { alert('bizData1DataChange'); }; return Model; });
demo.w <?xml version="1.0" encoding="utf-8"?> <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window"> <div component="$UI/system/components/justep/model/model" xid="model"> <div component="$UI/system/components/justep/data/bizData" xid="bizData1" autoLoad="true" concept="DEMO_TABLE1" columns="version,fString,fInteger,fFloat,fDecimal,fDate,fDateTime,fTime,fText" limit="2" onDataChange="bizData1DataChange"> <reader action="/demo/components/logic/action/queryDEMO_TABLE1Action"/> <writer action="/demo/components/logic/action/saveDEMO_TABLE1Action"/> <creator action="/demo/components/logic/action/createDEMO_TABLE1Action"/> <calculateRelation relation="calcCheckBox"/> <calculateRelation relation="recNO" type="Integer"/> <rule> <readonly> <expr><![CDATA[]]></expr> </readonly> <col name="fString"> <readonly> <expr><![CDATA[js:1000<val('fInteger')]]></expr> </readonly> <calculate> <expr/> </calculate> <constraint> <expr><![CDATA[js:$val.indexOf(val('fInteger'))<0]]></expr> <message xid="default1"><![CDATA[]]></message> </constraint> <required> <expr><![CDATA[js:true]]></expr> </required> </col> </rule> </div> <div component="$UI/system/components/justep/data/bizData" xid="selectData" autoLoad="true" concept="DEMO_TABLE1" columns="fString,fInteger,fFloat,fDecimal,fDate,fDateTime,fTime,fText" limit="5"> <reader action="/demo/components/logic/action/queryDEMO_TABLE1Action"/> </div> <div component="$UI/system/components/justep/data/data" xid="data1" idColumn="fName"> <column name="fName" type="String" label="显示名称"/> <column name="fAge" type="Integer" label="年龄"/> <rule xid="rule1"/> <data><![CDATA[ [{fName:'abc',fAge:18},{fName:'test',fAge:28}] ]]></data> </div> </div> <div> <h1>Data,BizData Component Demo</h1> <h3>Data组件</h3> <div> <table> <tr valign="top"> <td> <div>主当前行:</div> <div> <label bind-text="mainData.label('sName')"/> <input bind-value="mainData.ref('sName')" bind-validation="mainData.ref('sName')"/> </div> <div> <label bind-text="mainData.label('sAge')"/> <input bind-value="mainData.ref('sAge')"/> </div> <div> <label bind-text="mainData.label('sAmt')"/> <input bind-value="mainData.ref('sAmt')"/> </div> <div> <span>平均年龄：</span> <span bind-text="mainData.ageAvg" id="span2"/> </div> <div> <span>总价格：</span> <span bind-text="mainData.amtSum" id="span3"/> </div> <div> <span>修改状态：</span> <span bind-text="mainData.isChanged()" id="span3"/> </div> </td> <td> <div>主数据：</div> <div> <input bind-click="mainDataNew" type="button" value="new" id="input6" class="btn btn-info"/> <input bind-click="call(mainData,mainData.deleteData)" type="button" value="del" id="input6-1" class="btn btn-info"/> <input bind-click="call(mainData,mainData.tojson)" type="button" value="getJson" id="input7" class="btn btn-info"/> <input bind-click="call(mainData,mainData.first)" type="button" value="<<" id="input8" class="btn btn-info"/> <input bind-click="call(mainData,mainData.pre)" type="button" value="<" id="input9" class="btn btn-info"/> <input bind-click="call(mainData,mainData.next)" type="button" value=">" id="input11" class="btn btn-info"/> <input bind-click="call(mainData,mainData.last)" type="button" value=">>" id="input12" class="btn btn-info"/> </div> <ul bind-foreach="mainData.datas"> <li bind-css="{ curRow: $model.mainData.currentRow.get() == $object }"> <div> <label bind-text="label('sName')"/> <input bind-value="ref('sName')"/> </div> <div> <label bind-text="label('sAge')"/> <input bind-value="ref('sAge')"/> </div> <div> <label bind-text="label('sAmt')"/> <input bind-value="ref('sAmt')"/> </div> <div> <label bind-text="label('SA_Task')"/> <span bind-text="ref('SA_Task')"/> </div> </li> </ul> </td> <td> <div>从数据：</div> <div> <input bind-click="slaveDataNew" type="button" value="new" id="input6-1" class="btn btn-info"/> <input bind-click="call(slaveData,slaveData.deleteData)" type="button" value="del" id="input6-2" class="btn btn-info"/> <input bind-click="call(slaveData,slaveData.first)" type="button" value="<<" id="input8-1" class="btn btn-info"/> <input bind-click="call(slaveData,slaveData.pre)" type="button" value="<" id="input9-1" class="btn btn-info"/> <input bind-click="call(slaveData,slaveData.next)" type="button" value=">" id="input11-1" class="btn btn-info"/> <input bind-click="call(slaveData,slaveData.last)" type="button" value=">>" id="input12-1" class="btn btn-info"/> </div> <ul bind-foreach="slaveData.datas"> <li bind-css="{ curRow: $model.slaveData.currentRow.get() == $object}"> <div> <label bind-text="label('sName')"/> <input bind-value="ref('sName')"/> </div> <div> <label bind-text="label('sCount')"/> <input bind-value="ref('sCount')"/> </div> <div> <label bind-text="label('sUnitprice')"/> <input bind-value="ref('sUnitprice')"/> </div> <div> <label bind-text="label('sAmt')"/> <input bind-value="ref('sAmt')"/> </div> <div> <label bind-text="label('sInfo')"/> <input bind-value="ref('sInfo')"/> </div> <div> <label bind-text="label('SA_Task_Info')"/> <span bind-text="ref('SA_Task_Info')"/> </div> <div> <label bind-text="label('SA_Task')"/> <span bind-text="ref('SA_Task')"/> </div> </li> </ul> </td> <td> <div> <label bind-text="slaveData.label('sName')"/> <input bind-value="slaveData.ref('sName')"/> </div> <div> <label bind-text="slaveData.label('sCount')"/> <input bind-value="slaveData.ref('sCount')"/> </div> <div> <label bind-text="slaveData.label('sUnitprice')"/> <input bind-value="slaveData.ref('sUnitprice')"/> </div> <div> <label bind-text="slaveData.label('sAmt')"/> <input bind-value="slaveData.ref('sAmt')"/> </div> <div> <label bind-text="slaveData.label('sInfo')"/> <input bind-value="slaveData.ref('sInfo')"/> </div> <div> <label bind-text="slaveData.label('SA_Task_Info')"/> <span bind-text="slaveData.ref('SA_Task_Info')"/> </div> <div> <label bind-text="slaveData.label('SA_Task')"/> <span bind-text="slaveData.ref('SA_Task')"/> </div> </td> </tr> </table> <p bind-text="mainData.getInvalidInfo()"/> <p bind-text="slaveData.getInvalidInfo()"/> </div> <h3>BizData组件</h3> <div> <label>数据约束规则</label> <label>fString:</label> <label>1、必须有值</label> <label>2、必须包含字符串'abc'</label> <label>3、必须包含fInteger</label> <label>fInteger:</label> <label>1、必须有值</label> <label>2、必须是数字</label> <label>数据只读规则</label> <label>当fInteger大于500时fString只读</label> </div> <div> <span>修改状态：</span> <span bind-text="bizChanged"/> <span>校验状态：</span> <span bind-text="bizData.isValid()"/> <span>记录数：</span> <span bind-text="bizData.getCount()"/> </div> <div> <span>直接删除：</span> <input type="checkbox" bind-checked="bizDataDirectDelete"/> <span>，删除提示：</span> <input type="checkbox" bind-checked="bizDataDeleteConfirm"/> <span>，data只读：</span> <input type="checkbox" bind-checked="bizDataReadonly"/> </div> <div> <input bind-click="call(bizData,bizData.newData)" type="button" value="New" class="btn btn-info"/> <input bind-click="call(bizData,bizData.refreshData)" type="button" value="Refresh" class="btn btn-info"/> <input bind-click="call(bizData,bizData.deleteData)" type="button" value="Del" class="btn btn-info"/> <input bind-click="call(bizData,bizData.saveData)" type="button" value="Save" class="btn btn-info"/> <input bind-click="call(bizData,bizData.first)" type="button" value="<<" class="btn btn-info"/> <input bind-click="call(bizData,bizData.pre)" type="button" value="<" class="btn btn-info"/> <input bind-click="call(bizData,bizData.next)" type="button" value=">" class="btn btn-info"/> <input bind-click="call(bizData,bizData.last)" type="button" value=">>" class="btn btn-info"/> <input bind-click="test" type="button" value="test" class="btn btn-info"/> </div> <table> <tr valign="top" class="tr"> <td id="td"> <ul bind-foreach="bizData.datas"> <li bind-css="{ curRow:$model.bizData.currentRow.get() == $object }"> <div> <label bind-text="label('fString')"/> <input bind-value="ref('fString')" bind-validation="ref('fString')" bind-readonly="ref('fString')"/> </div> <div> <label bind-text="label('fInteger')"/> <input bind-value="ref('fInteger')" bind-validation="ref('fInteger')" bind-readonly="ref('fInteger')"/> </div> <div> <label bind-text="label('fFloat')"/> <input bind-value="ref('fFloat')" bind-readonly="ref('fFloat')"/> </div> <div> <label bind-text="label('fDecimal')"/> <input bind-value="ref('fDecimal')" bind-readonly="ref('fDecimal')"/> </div> <div> <label bind-text="label('fDateTime')"/> <input bind-value="ref('fDateTime')" bind-readonly="ref('fDateTime')"/> </div> <div> <label bind-text="label('fText')"/> <input bind-value="ref('fText')" bind-readonly="ref('fText')"/> </div> <div> <label bind-text="label('fTime')"/> <input bind-value="ref('fTime')" bind-readonly="ref('fTime')"/> </div> </li> </ul> </td> <td> <div>当前行:</div> <div> <label bind-text="bizData.label('fString')"/> <input class="form-control String" bind-value="bizData.ref('fString')" bind-validation="bizData.ref('fString')" bind-readonly="bizData.ref('fString')"/> <!-- --> <!-- <input component="$UI/system/components/input/input" config='{"width":160,"placeHolder":"请输入字符串"}' xid="input1" bind-ref="bizData.ref('fString')"> <input/> <div xid="search"> <img style="16px; height:22px" src="$UI/system/components/input/img/datePicker.gif"></img> </div> </div> --> </div> <div> <label bind-text="bizData.label('fInteger')"/> <input bind-value="bizData.ref('fInteger')" bind-validation="bizData.ref('fInteger')" bind-readonly="bizData.ref('fInteger')"/> <!-- --> </div> <div> <label bind-text="bizData.label('fFloat')"/> <input bind-value="bizData.ref('fFloat')" bind-readonly="bizData.ref('fFloat')"/> </div> <div> <label bind-text="bizData.label('fDecimal')"/> <input bind-value="bizData.ref('fDecimal')" bind-readonly="bizData.ref('fDecimal')"/> </div> <div> <label bind-text="bizData.label('fDateTime')"/> <input bind-value="bizData.ref('fDateTime')" bind-readonly="bizData.ref('fDateTime')"/> </div> <div> <label bind-text="bizData.label('fText')"/> <input bind-value="bizData.ref('fText')" bind-readonly="bizData.ref('fText')"/> </div> <div> <label bind-text="bizData.label('fTime')"/> <input bind-value="bizData.ref('fTime')" bind-readonly="bizData.ref('fTime')"/> </div> </td> </tr> </table> <h3>描述的BizData组件</h3> <div> <a component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left" onClick="{operation:'bizData1.new'}"> <i/><span></span> </a> <a onClick="{operation:'bizData1.refresh'}" component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left"> <i/><span></span> </a> <a onClick="{params:{ids:'js:$m.ids'},operation:'bizData1.delete'}" component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left"> <i/><span></span> </a> <a onClick="{operation:'bizData1.save'}" component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left"> <i/><span></span> </a> <a onClick="createInput" component="$UI/system/components/justep/button/button" label="createInput" class="btn btn-info"> <i/><span>createInput</span> </a> <a onClick="createOutput" component="$UI/system/components/justep/button/button" label="createOutput" class="btn btn-info"> <i/><span>createOutput</span> </a> <a onClick="createTextarea" component="$UI/system/components/justep/button/button" label="createTextarea" class="btn btn-info"> <i/><span>createTextarea</span> </a> <a onClick="{operation:'bizData1.firstRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"> <i/><span></span> </a> <a component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-left" onClick="{operation:'bizData1.prevRow'}"> <i/><span></span> </a> <a component="$UI/system/components/justep/button/button" class="btn btn-info btn-icon-right" onClick="{operation:'bizData1.nextRow'}"> <i/><span></span> </a> <a onClick="{operation:'bizData1.lastRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-right"> <i/><span></span> </a> </div> <div>当前行:</div> <div> <label bind-text="bizData1.label('fString')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入字符串" style="300px" xid="input1" class="form-control" data="bizData1" bind-ref="bizData1.ref('fString')"/> <input component="$UI/system/components/justep/input/password" placeHolder="请输入字符串" style="300px" xid="input1-pw" class="form-control" data="bizData1" bind-ref="bizData1.ref('fString')"/> <span style="display: block;" component="$UI/system/components/justep/button/checkbox" class="x-checkbox" name="checkbox" value="1" label="选项----1" bind-ref="bizData1.ref('fString')"/> <span component="$UI/system/components/justep/button/toggle" class="x-toggle" type="checkbox" name="checkbox1" value="1" ON="开" OFF="关" bind-ref="bizData1.ref('fString')"/> <div component="$UI/system/components/justep/select/radioGroup" class="x-radio-group" _vertical="true" name="r" bind-itemset="selectData" bind-itemsetValue="ref('fString')" bind-itemsetLabel="ref('fString')" bind-ref="bizData1.ref('fString')"/> </div> <div> <label bind-text="bizData1.label('fInteger')"/> <input component="$UI/system/components/justep/input/range" xid="input2" min="1" max="10000" data="bizData1" bind-ref="bizData1.ref('fInteger')"/> </div> <div> <label bind-text="bizData1.label('fFloat')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入数值" xid="input3" class="form-control" data="bizData1" bind-ref="bizData1.ref('fFloat')"/> </div> <div> <label bind-text="bizData1.label('fDecimal')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入数值" xid="input4" class="form-control" data="bizData1" bind-ref="bizData1.ref('fDecimal')"/> </div> <div xid="create-input"> <label bind-text="bizData1.label('fDateTime')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入日期时间" xid="input5" class="form-control" data="bizData1" format="yy-MM-dd hh:mm" bind-ref="bizData1.ref('fDateTime')"/> </div> <div xid="create-output"> <label bind-text="bizData1.label('fText')"/> <select class="form-control" component="$UI/system/components/justep/select/select" bind-ref="bizData1.ref('fText')" bind-labelRef="bizData1.ref('fString')" bind-options="selectData" bind-optionsLabel="fString" bind-optionsValue="DEMO_TABLE1" bind-optionsCaption="请选择..."/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入text" xid="input6" class="form-control" data="bizData1" bind-ref="bizData1.ref('fText')" onRender="input6Render"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入text" xid="input6-1" class="form-control" data="bizData1" bind-ref="bizData1.ref('fText')"/> <span component="$UI/system/components/justep/button/checkbox" class="x-checkbox" bind-ref="bizData1.ref('fText')" label="选项----1"></span> <div component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group" name="c" bind-itemset="selectData" bind-itemsetValue="ref('DEMO_TABLE1')" bind-itemsetLabel="ref('fString')" bind-ref="bizData1.ref('fText')"/> </div> <div> <label bind-text="bizData1.label('fTime')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入时间" xid="input7" class="form-control" data="bizData1" bind-ref="bizData1.ref('fTime')"/> </div> <ul bind-foreach="bizData1.datas"> <li bind-css="{ curRow: $model.bizData1.currentRow.get() == $object }"> <div> <label bind-text="label('fString')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入字符串" xid="input1-1" class="form-control" data="bizData1" bind-ref="ref('fString')"/> <span style="display: block;" component="$UI/system/components/justep/button/checkbox" class="x-checkbox" value="1" label="选项----1" bind-ref="ref('fString')"/> <span component="$UI/system/components/justep/button/toggle" class="x-toggle" type="checkbox" value="1" ON="开" OFF="关" bind-ref="ref('fString')"/> </div> <div> <label bind-text="label('fInteger')"/> <input component="$UI/system/components/justep/input/input" xid="input2-1" class="form-control" data="bizData1" bind-ref="ref('fInteger')"/> </div> <div> <label bind-text="label('fFloat')"/> <input component="$UI/system/components/justep/input/input" xid="input3-1" class="form-control" data="bizData1" bind-ref="ref('fFloat')"/> </div> <div> <label bind-text="label('fDecimal')"/> <input component="$UI/system/components/justep/input/input" xid="input3-1" class="form-control" data="bizData1" bind-ref="ref('fDecimal')"/> </div> <div> <label bind-text="label('fDateTime')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入日期时间" xid="input5-1" class="form-control" data="bizData1" format="yyyy-MM-dd hh:mm" bind-ref="ref('fDateTime')"/> <div component="$UI/system/components/justep/output/output" placeHolder="请输入日期时间" xid="output5-1" class="x-output" data="bizData1" format="yyyy-MM-dd hh:mm" bind-ref="ref('fDateTime')"/> </div> <div> <label bind-text="label('fText')"/> <div component="$UI/system/components/justep/select/checkboxGroup" class="x-checkbox-group" name="ccc" bind-itemset="$model.selectData" bind-itemsetValue="ref('DEMO_TABLE1')" bind-itemsetLabel="ref('fString')" bind-ref="ref('fText')"/> <select class="form-control" component="$UI/system/components/justep/select/select" bind-ref="ref('fText')" bind-labelRef="ref('fString')" bind-options="$model.selectData" bind-optionsLabel="fString" bind-optionsValue="DEMO_TABLE1" bind-optionsCaption="请选择..."/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入text" xid="input6-2" class="form-control" data="bizData1" bind-ref="ref('fText')" onRender="input6Render"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入text" xid="input6-21" class="form-control" data="bizData1" bind-ref="ref('fText')"/> <div component="$UI/system/components/justep/output/output" xid="output6-21" class="x-output" data="bizData1" bind-ref="ref('fText')" onRender="output6Render"/> <textarea component="$UI/system/components/justep/textarea/textarea" xid="textarea6-21" class="form-control" data="bizData1" bind-ref="ref('fText')"/> </div> <div> <label bind-text="label('fTime')"/> <input component="$UI/system/components/justep/input/input" xid="input3-1" class="form-control" data="bizData1" bind-ref="ref('fTime')"/> </div> </li> </ul> <h3>描述的Data组件</h3> <div> <a component="$UI/system/components/justep/button/button" onClick="{operation:'data1.new'}" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.refresh'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.delete'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.save'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.firstRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.prevRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-left"><i/><span></span></a> <a onClick="{operation:'data1.nextRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-right"><i/><span></span></a> <a onClick="{operation:'data1.lastRow'}" component="$UI/system/components/justep/button/button" label="" class="btn btn-info btn-icon-right"><i/><span></span></a> </div> <div>当前行:</div> <div> <label bind-text="data1.label('fName')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入名称" style="300px" xid="input51" class="form-control" data="data1" bind-ref="data1.ref('fName')"/> </div> <div> <label bind-text="data1.label('fAge')"/> <input component="$UI/system/components/justep/input/input" placeHolder="请输入年龄" style="300px" xid="input52" class="form-control" data="data1" bind-ref="data1.ref('fAge')"/> </div> </div> </div>
网络查找（未验证）：
整理了下list和data组件的绑定关系，请问版主，是否满足以下规律，如果不是，请帮忙指正下小弟。
1. 动态生成的list组件和动态生成的data组件，无法完成绑定，生成list组件时会出错
2. 静态定义的list组件和动态生成的data组件（可以在var Model = function(){}中动态生成data组件），可以正常完成绑定，list显示data组件的数据正常
3. 动态生成的list组件和静态定义的data组件，可以正常完成绑定，list显示data组件的数据正常
4. 静态定义的list组件和静态定义的data组件，可以正常完成绑定，list显示data组件的数据正常