jeecg 擴充封裝查詢條件 時間段查詢

標籤：方法   port   src   技術分享   easyui   option   href   tag   images   

　　使用jeecg架構開發的小夥伴們知道，添加查詢條件，通常是我們加一個配置（query="true"）就可以將該欄位設定為查詢條件。簡單方便。但是這樣的配置查詢條件僅適用於輸入框輸入查詢和下拉框查詢（如果你配置的該欄位使用了replace）。顯然，這樣的查詢條件根本滿足不了我們的需求，最常見的就是時間段查詢，以及時間段與其他欄位混合查詢的情況，下面簡單說一下解決方案。

　　自訂查詢條件，

第一步：將欄位中所有配置的query="true"，改為query="false"，即告訴架構我不需要你給我產生查詢條件

第二步：在<t:datagrid></t:datagrid>下方加上一個div，此div就是放置查詢條件的，並在div裡配置你需要的查詢條件。

<div  style="padding: 3px; height: 70px">        <div name="searchColums" style="float: left; padding-left: 15px;">        <span>              <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 80px;text-align:right;" title="訂單號 ">訂單號: </span>              <input type="text" name="orderNo" style="width: 100px; height: 24px;">                            <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 80px;text-align:right;" title="客戶姓名">客戶姓名: </span>              <input type="text" name="clientId.name" style="width: 100px; height: 24px;">                            <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 80px;text-align:right;" title="車牌號">車牌號: </span>              <input type="text" name="licensePlateNumber" style="width: 100px; height: 24px;">                            <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 80px;text-align:right;" title="計費狀態">計費狀態: </span>              <select name="state" style="width: 80px">                  <option value="">請選擇</option>                  <option value="1">計費成功</option>                  <option value="0">計費失敗</option>               </select>             <br/>             <br/>              <span style="vertical-align:middle;display:-moz-inline-box;display:inline-block;width: 90px;text-align:right;" title="出場時間 ">出場時間: </span>              <input type="text" name="outtime_begin" style="width: 100px; height: 24px;">~              <input type="text" name="outtime_end" style="width: 100px; height: 24px; margin-right: 20px;">         </span>         <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="deductionListsearch();" style="text-align: right;width: 670px">查詢</a>         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-putout" onclick="exportExcel();">匯出excel</a>    </div></div>

第三步：參考上面的代碼，有幾個地方需要注意。

1. 標紅的是你需要設定的查詢欄位名稱，該名稱和你<t:datagrid></t:datagrid>中的<t:dgCol>中的field欄位名稱對應
2. 標藍的是時間段的配置，這裡你只需要放上兩個input輸入框，然後在js代碼裡添加如下代碼：

    $(document).ready(function(){        $("input[name=‘outtime_begin‘]").attr("class","Wdate").attr("style","height:20px;width:90px;").click(function(){WdatePicker({dateFmt:‘yyyy-MM-dd‘});});        $("input[name=‘outtime_end‘]").attr("class","Wdate").attr("style","height:20px;width:90px;").click(function(){WdatePicker({dateFmt:‘yyyy-MM-dd‘});});    });

    

3. 標粉的這個方法一定要注意，需要我們自己寫嗎？當然no，但是起名的時候一定要注意是你<t:datagrid></t:datagrid>的name加search()產生。
4. <t:datagrid name="testList" >例如我現在起的名字是testList，那麼該方法名就是testListsearch();之所以是這樣，是因為架構封裝的查詢規則。

第四部：這樣自訂查詢條件前台已經完成了。後台如果是普通配置的查詢條件，就使用CriteriaQuery.add()方法就行，所有參數都可以通過request擷取到，當然你也沒必要這樣做。

下面附上一張：

jeecg 擴充封裝查詢條件 時間段查詢