panel 組件
布局為 top組件 content組件 bottom組件
1、contents組件形成多內容頁
2、bottom組件添加buttonGroup組件形成多按鈕
3、buttonGroup組件中的button組件通過 target關聯contents組件中的content組件，實現內容也與按鈕關聯
默認選擇已選定的組件，選擇buttonGroup組件的select組件選中默認組件的id
<a component="$UI/system/components/justep/button/button" class="btn btn-default btn-icon-top" label="動態" xid="bynBtn" icon="linear linear-map" target="content7">
4.panel組件形成上中下等格局
titleBar組件，除了設置顯示的固定頭部，還設置蘋果顏色特有的狀態欄顏色
6.嵌入組件
在content組件嵌入W文件windowContain組件 src./xx.w
<div component="$UI/system/components/justep/windowContainer/windowContainer" class="x-window-container" xid="windowContainer1" src="./multi-list.w" autoLoad="true"></div>
7.數據組件
增加數據先設置列
model組件 data組件，設置組件列，編輯列，添加商品id fing ，數據組件是一個二維表，先設置列，再編輯數據
8.獲取靜態數據
json數據 ，img路徑
data組件autoLoad =true 將數據進行自動下載
可以自己在js設置方法進行數據 ，在data屬性是有一個onCustonRefresh
使用ajax進行數據請求
url require.Url();
event.source.loadData(data);
將Json數據組件中的數據可以導入到數據組件中
數據組件中數據同樣也可以導出，格式也是json
//組件的自動刷新
Model.prototype.goodsDataCustomRefresh =function (event){
//轉化為相對路徑
var url=require.toUrl("./json/goodsData.json");
alert(url);
//ajax設置為同步請求
$.ajaxSettings.async=false;
$.getJSON(url,function(data){
//將返回的data裝載在data組件中
event.source.loadData(data);
});
}
9.List組件進行頁面加載
scrollview滾動頁面可以自適應加載數據，測試靜態數據加載，當連接數據庫進行可以自適應加載
顯示添加list組件<li>組件<img>組件加載
<div class="x-panel-content x-scroll-view" xid="content11" _xid="C8F3EEAB140000018DF011D095001720"><div class="x-scroll"
component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView1"> <div class="x-content-center x-pull-down container" xid="div1"> <i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i5"></i> <span class="x-pull-down-label" xid="span5">下拉刷新...</span></div> <div class="x-scroll-content" xid="div2"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list5" data="goodsData"> <ul class="x-list-template" xid="listTemplateUl5"> <li xid="li5"><img src=" " alt="" xid="image1" bind-attr-src=' val("fimg")' style="width:100%;"></img></li></ul> </div></div> <div class="x-content-center x-pull-up" xid="div3"> <span class="x-pull-up-label" xid="span6">加載更多...</span></div> </div></div>
List組件設置綁定data
！！！！，出錯了，最后一組數據無逗號
[
{"id": "99",
"fimg":"pic/0.png"},
{"id": "100",
"fimg":"pic/1.png"},
{"id": "101",
"fimg":"pic/2.png"},
{"id": "102",
"fimg":"pic/3.png"}
]
<div component="$UI/system/components/justep/list/list" class="x-list" xid="list5" data="goodsData">
bind-sttr-src設置對應data組件的屬性
選擇圖片，需要選擇當前行
<ul class="x-list-template" xid="listTemplateUl5"> <li xid="li5"><img src=" " alt="" xid="image1" bind-attr-src=' val("fimg")'></img></li></ul>
列表組件封裝了ul組件，凡是可以在ul li上面的樣式都可也設置在listTmplateUI和li上，達到相同的效果
10.雙列列表
BootStrap柵格系統
將屏幕分為12列，在class屬性設置col-xs-6 col-xs-4 col-xs-3
<li xid="li1" class="col-xs-3">
使用搜索功能，使用頁面調用功能，從json文件讀取數據放入data組件中
search.w 組件設置 content組件添加list組件li組件下面添加media組件，使用media的left組件，使用屬性bind-attr-src組件關聯圖片和mediabody組件設置，
h4組件bind-text組件設置val（）屬性。在添加span組件，bind-text組件進行綁定，設置的val（）屬性
<div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="ListData"> <ul class="x-list-template" xid="listTemplateUl1"> <li xid="li1" class="col-xs-3"><div class="media" xid="media1"> <div class="media-left" xid="mediaLeft1"> <a href="#" xid="a1"> <img class="media-object" src="" alt="" xid="image1" bind-attr-src=' val("fImg")' height="20%"></img></a> </div> <div class="media-body" xid="mediaBody1"> <h4 class="media-heading" xid="h41" bind-text=' val("fClassName")'>Media heading </h4> <span xid="span2" bind-text='val("fDescription")'></span></div> </div></li></ul> </div> </div>
11. 嵌套列表
list渲染數據，進行過濾顯示
過濾內嵌list組件過濾條件 $row.val("foodid")==val("id") 計算行==val("id") 外嵌列
實現過程
<div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="cartShopData"> <ul class="x-list-template" xid="listTemplateUl1"> <li xid="li1"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1"> <div class="x-col" xid="col1"></div> <div class="x-col" xid="col2"><span xid="span1" bind-text='val("fShopName")'></span></div> <div class="x-col" xid="col3"></div></div><div component="$UI/system/components/justep/list/list" class="x-list" xid="list2" data="cardGoodsData" filter='$row.val("fShopID")== val("id")'> <ul class="x-list-template" xid="listTemplateUl2"> <li xid="li2"><span xid="span3" bind-text='val("fTitle")'></span></li></ul> </div></li></ul> </div></div>
12.復雜列表
使用行組件，
row垂直居中，列寬自適應大小，默然添加3行
點擊列x-col-fixed自適應樣式 x-col-center 垂直居中樣式 width：auto
商品列表作為內嵌列表，row行里面有col，col列里面有行row，可以無限嵌套，實現復雜界面
13.checkBox復選框使嵌套 列表顯示
checkbox作為一列，在data組件新增列計算列fCheck默認 checkvalue=1選中為1，onChange雙擊點擊事件 選中事件
Model.prototype.checkShopIDChange = function(event){ //listrow 自動生成 checkbox所在的list的行 var row =event.bindingContext.$object; //通過列獲取shopID，選中行的取值方法，獲取商鋪表id， var shopID=row.val("id"); //使用商鋪id去查詢商鋪下所有商品，獲得對象，調用方法，find(表名屬性列，查找的值為shopID)獲得數組 var rows=this.comp("cardGoodsData").find(['fShopID'],[shopID]); //遍歷數組，給每一行賦值，取消或選中全部商品 for(var i=0;i<rows.length;i++){ rows[i].val('fCheck',event.value); } }; Model.prototype.checkGoodIDChange = function(event){ var row = event.bindingContext.$object; var shopID=row.val("fShopID"); // var rows=this.comp("cardGoodsData").find(['fShopID','fCheck'],[shopID,1]); //計算選中行的值，進行修改 var rowsNum=rows.length; if(event.checked) rowsNum++; else rowsNum--; if(rowsNum>0) //獲取對象設置shopID這行的fCheck為1，設置選商品為選中 this.comp("cartShopData").setValueByID('fCheck',1, shopID); else this.comp("cartShopData").setValueByID('fCheck',"", shopID); };
展現組件的值來自數據組件中的數據，不需要修改展現組件的數值，修改數據組件中的數據就可以了，
好處是，1.只需要掌握數據組件的用法，2，更換數據組件不需要修改相關代碼
3.數據組件是頁面組件的核心，展現組件是面向數據組件的。
賦值、取值val（）購物車數量加減操作
Model.prototype.addBtnClick = function(event){
var row = event.bindingContext.$object;
row.val('fNumber',row.val('fNumber')+1);
};
Model.prototype.subBtnClick = function(event){
var row = event.bindingContext.$object;
if(row.val('fNumber')>1)
row.val('fNumber',row.val('fNumber')-1);
};
14.span組件 bind-visible屬性
顯示折扣信息，原價大於110顯示
<span xid="span2" bind-text='"原價￥" + val("fOldPrice")' style="color:#C0C0C0;" bind-visible=' val("fOldPrice") >110'></span>
常用綁定屬性
bind-style，bind-css控制顯示樣式
bind-visible 控制組件是否顯示
bind-text 控制組件顯示文本
15.過濾表達式，二級列表過濾
傳參使用參數過濾列表
分類表showpage打開頁面，在Js中訪問model對象使用this，比如this.params.rootID，在屬性設置使用model對象使用$model,比如$model.params.rootID
//點擊list組件的click事件
Model.prototype.list1Click = function(event){
//不在使用listrow，點擊數據已經成數據當前行,row 發生的事件比較早
var rootID=this.comp("ListData").val("id");
//打開頁面，傳遞參數
justep.Shell.showPage(require.toUrl("./rootClass.w"),{"rootID":rootID});
};
傳輸頁面，在另一個頁面使用model組件里面onParamsReceive進行數據傳遞接收
Model.prototype.modelParamsReceive = function(event){
// alert(this.params.rootID);
};
在list組件使用過濾事件.列表組件的數據不等同於數據組件中的數據，，列表組件中的數據可以是一個數組，也可以是數據組件中的一部分數據，使用過濾組件，進行過濾處理
<div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="secondClassData"
filter=' $row.val("rootID") ==$model.params.rootID'>
數據組件的規則表達式
增加列，編輯規則，計算按鈕，金額是否選中
先判斷商品是否選中，選中計算金額，為選中金額設置為0，
<col name="fMoney" xid="ruleCol1"> <calculate xid="calculate1"> <expr xid="default1">$row.val("fCheck")==1? $row.val("fPrice") * $row.val("fNumber") : 0</expr></calculate> </col>
計算商鋪總金額求和，判斷是否屬於同一個商鋪，相等進行fMoney相加
<col name="fSumMoney" xid="ruleCol2"> <calculate xid="calculate2"> <expr xid="default2">$model.cardGoodsData.sum("fMoney",function(ev){
//計算規則sum方法，回調函數 判斷data數據行的值是否與當前行id是否相等，返回true或false return ev.row.val('fShopID') == $row.val("id") })</expr></calculate> </col> <col name="fSumConut" xid="ruleCol3">
計算樣品種類，在商品編輯規則，計算種類總計
<col name="fSumConut" xid="ruleCol3"> <calculate xid="calculate3"> <expr xid="default3">$model.cardGoodsData.sum("fCheck",function(ev){ return ev.row.val('fShopID') == $row.val("id")})</expr></calculate> </col>
數據組件才是規則屬性，通過設置規則表達式控制整個數據集的只讀，或者某個列的只讀、必填、計算、計算公式、約束規則
數據組件是頁面的核心
