該類頁面通常的展示形式如下：
* 當點擊查詢按鈕時執行相關的查詢操作，然后將返回的數據填充到下面的表格中；
* 同時，表格中還包含新建按鈕和對應每條記錄的詳情按鈕；
* 有時候，該頁面中的某些查詢字段還需要進行預先初始化，以準備相關的數據，例如上面的“機構”字段。
因此，可以總結出此類頁面的幾個基本函數（以p001_為例）
* showOrgs()：機構字段的初始化函數
* p001_searchUser()：點擊查詢按鈕后執行的回調函數
* p001_getDetail(id)：點擊新建或詳情按鈕后執行的回調函數
這里需要解釋的是showOrgs函數之所以沒有添加p001_前綴，是因為這是個通用的字段填充類函數，因此可以將這個函數放在common.js中，而不是放在頁面對應的js中。
在html頁面中將這幾個函數分別添加到合適的位置：
showOrgs函數放在customselect組件的data-init屬性中
```
<input id="superiorID" placeholder="全部" data-title="機構" data-type="awf-customselect" data-width="col-lg-5" data-init="showOrgs()">
```
p001_searchUser函數放在button組件的data-callback屬性中
```
<button data-type="awf-button" data-callback="p001_searchUser()">查詢</button>
```
對于表格的生成，組件庫提供了一個便利函數`AWFCommon.table()`，利用該函數可用很容易地生成表格，具體用法參考[H5組件庫公共函數庫](http://121.40.133.218/docs/app/commonfunc.html#func-table)。
p001_getDetail函數需要放在兩個地方，一個是table組件的addNew按鈕，另一個是詳情超鏈接中，其中第一個可在html頁面中添加
```
<table id="userInfo" data-type="awf-table" data-title=' ' data-extbtn='addNew' data-addNew-callback='p001_getDetail(0);'>
```
這里參數0的意思就是新建，否則就是顯示對應編號的詳情。
另一個需要在p001_searchUser函數中動態生成
```
tabStr += td(dispActive(activeFlag,userID) +' '
+'<a class="orange" href="javascript:p001_restPass('+ userID +')">重置密碼 </a> '
+'<a class="orange" href="javascript:p001_getDetail('+ userID +')">詳情 </a>');
```
最后給出一個p001_getDetail函數的標準實現
```
function p001_getDetail(ID){
$.cookie('userID', ID);
goPage("UserDetail.htm");
}
```
這里利用cookie來實現頁面間參數的傳遞，即在頁面進行跳轉之前將參數保存到cookie中，然后在跳轉后的頁面再從cookie中將參數取出來。
