通過按鈕打開window，顯示出相關設定的欄位提供用戶參考選擇，同時可以帶回關聯欄位。該功能class為info-refval
用例
紅色標注部分為FormColumn的infolight-options的屬性。
黃色為RefVal的infolight-options屬性。
綠色部份有兩處，前一處為上部工具列(前後頁和查詢)，後一處為下部工具列(前後頁)。
青色部份為可以查詢的欄位，這裡為CustomerID，CompanyName。
|
<div data-role="fieldcontain"> <label for="dataFormMaster_CustomerID">CustomerID</label><input id="dataFormMaster_CustomerID" name="CustomerID" data-mini="true" infolight-options="field:'CustomerID',width:120,align:'left',remoteName:'sOrders.Customers',tableName:'Customers',displayMember:'CompanyName',valueMember:'CustomerID',pageSize:20,columns:[{field:'Address',caption:'Address'}],whereItems:[{field:'Country',whereValue:{type:'constant',value:['France']}}],columnMatches:[{field:'ShipCity',matchValue:{type:'row',value:['City']}},{field:'ShipCountry',matchValue:{type:'row',value:['Country']}}],queryObjectID:'#dataFormMaster_CustomerID_query'" class="info-refval" type="text" onclick="$('#dataFormMaster_CustomerID').refval('open');" /><div id="dataFormMaster_CustomerID_popup" data-role="popup" data-overlay-theme="a" data-dismissible="false" style="width: 250px"> <a data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" data-rel="back" href="#" class="ui-btn-right">Close</a><div data-role="header" data-theme="b">
<h1>Select Item</h1> </div> <div data-role="content" data-theme="b" style="padding-top: 0px">
<div style="height: 50px;">
<a class="grid-previous" data-mini="true" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="notext">Previous page</a>
<a class="grid-next" data-mini="true" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="notext">Next page</a>
<a class="grid-query" data-mini="true" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">Query</a>
</div> <div id="dataFormMaster_CustomerID_query" class="info-query" data-theme="b" style="margin-bottom: 15px; margin-top: -20px; display: none"> <div data-role="fieldcontain"> <label for="dataFormMaster_CustomerID_query_CustomerID">CustomerID</label><input id="dataFormMaster_CustomerID_query_CustomerID" name="CustomerID" data-mini="true" infolight-options="queryField:'CustomerID',condition:'%',datatype:'string'" type="text" />
</div>
<div data-role="fieldcontain"> <label for="dataFormMaster_CustomerID_query_CompanyName">CompanyName</label><input id="dataFormMaster_CustomerID_query_CompanyName" name="CompanyName" data-mini="true" infolight-options="queryField:'CompanyName',condition:'%',datatype:'string'" type="text" />
</div>
</div>
<ul data-role="listview" data-theme="d"></ul>
<div style="height: 30px; margin-top: 20px">
<a class="grid-previous" data-mini="true" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="notext">Previous page</a><a class="grid-next" data-mini="true" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="notext">Next page</a>
</div> </div> </div> </div> |
infolight-options
|
名稱 |
功能描述 |
|||||||||
|
columns |
設定在Grid中顯示的欄位，該屬性可以不設定 |
|||||||||
|
columnMatchs |
用於設定關聯欄位帶入的功能 |
|||||||||
|
displayMember |
顯示資料欄位 |
|||||||||
|
pageSize |
開窗顯示的資料的每頁的筆數 |
|||||||||
|
queryObjectID |
開窗選件對應的查詢元件ID |
|||||||||
|
remoteName |
設定連接的Server端以及對應取資料的InfoCommand。格式：server專案名稱.連接的InfoCommand的ID |
|||||||||
|
tableName |
設定實際連接的InfoCommand的名稱 |
|||||||||
|
valueMember |
保存資料值欄位 |
|||||||||
|
whereItems |
對選取的資料進行過濾
|