easyui中一鍵清空搜索欄搜索條件的思路

$.fn.clearAllSearchPanel = function () {
    var $id = $(this);
    $id.find(".form-control").each(function (index, element) {
        var type = $(this).attr('type');
        switch (type) {
            case type = "text":
                $(this).val("")
                break;
        }
    });
    $id.find(".input-datepicker").each(function (index, element) {
        var type = $(this).attr('type');
        switch (type) {
            case type = "datepicker":
                $(this).val('');
                break;
        }
    });
    $id.find(".ui-select").each(function (index, element) {
        var type = $(this).attr('type');
        switch (type) {
            case type = "select":
                if ($(this).hasClass('easyui-combogrid')) {
                    $(this).combogrid("setValue", "")
                }
                else {
                    $(this).ComboBoxSetValue("");
                }
                break;
        }
    });
    $id.find(".ui-checkbox").each(function (index, element) {
        var type = $(this).attr('type');
        switch (type) {
            case type = "checkbox":
                if ($(this).is(":checked")) {
                    $(this).removeAttr("checked");

                } else {
                    $(this).attr("checked", 'checked');
                }
                break;
        }
    });
}

　

調用:

 

//清空
function btn_clear() {
$(".searchPanel").clearAllSearchPanel();
}

　

界面:

<div class="ui-layout" id="layout" style="height:100%; width:100%; ">
    <div class="ui-layout-north">
        <div class="north-Panel">
            <div class="toolbarPanel">
                <div class="title">托單管理</div>
                 <div class="toolbar">
                   <div class="btn-group">
                        <a id="lr-search" class="btn btn-default" onclick="btn_search()"><i class="fa fa-search"></i>查詢</a>
                        <a id="lr-clear" class="btn btn-default" onclick="btn_clear()"><i class="fa fa-retweet"></i>清空</a>
                   </div>
                   <div class="btn-group">
                        <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>新增</a>
                        <a id="lr-edit" class="btn btn-default" onclick="btn_edit('')"><i class="fa fa-pencil-square-o"></i>編輯</a>
                        <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>刪除</a>
                   </div>
                     <div class="btn-group">
                         <a id="lr-confirm" class="btn btn-default" onclick="btn_confirm()"><i class="fa fa-check-square-o"></i>&nbsp;托單確認</a>
                         <a id="lr-print" class="btn btn-default" onclick="btn_print()"><i class="fa fa-print"></i>&nbsp;托單打印</a>
                         <a id="lr-addcharge" class="btn btn-default" onclick="btn_addcharge()"><i class="fa fa-pencil-square-o"></i>生成費用</a>
                     </div>
                     <div class="btn-group">
                         <a id="lr-export" class="btn btn-default" onclick="btn_export()"><i class="fa fa-file-excel-o"></i>&nbsp;導出</a>
                         <a id="lr-close" class="btn btn-default" onclick="btn_close()"><i class="fa fa-times-circle"></i>關閉</a>
                     </div>
                   <script>$('.toolbar').authorizeButton()</script>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-layout-center">
         <div class="center-Panel">
             <div class="searchPanel">
                  <div class="row">
                        <div class="col-xs-3">
                             <label class="form-label col-md-4">
                                   費率單號
                             </label>
                             <div class="col-md-8">
                                    <input id="JobNo" type="text" class="form-control" />
                             </div>
                        </div>
                      <div class="col-xs-3">
                          <label class="form-label col-md-4">
                              預約單號
                          </label>
                          <div class="col-md-8">
                              <input id="BookingNo" type="text" class="form-control" />
                          </div>
                      </div>
            
                      <div class="col-xs-3">
                          <label class="form-label col-md-4">
                              主提單號
                          </label>
                          <div class="col-md-8">
                              <input id="MBLNo" type="text" class="form-control" />
                          </div>
                      </div>
                        <div class="col-xs-3">
                             <label class="form-label col-md-4">
                                   訂單狀態
                             </label>
                             <div class="col-md-8">
                                 <div id="OrderStatus" type="select" class="ui-select"></div>
                             </div>
                        </div>
                 
                  </div>
                 <div class="row">
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             創建日期開始
                         </label>
                         <div class="col-md-8">
                             <input id="CreateDT" type="text" class="form-control input-datepicker" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
                         </div>
                     </div>
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                            至創建日期結束
                         </label>
                         <div class="col-md-8">
                             <input id="CreateDTEnd" type="text" class="form-control input-datepicker" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
                         </div>
                     </div>
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             業務月份
                         </label>
                         <div class="col-md-8">
                             <input id="BusinessMonth" type="text" class="form-control input-datepicker" onfocus="WdatePicker({dateFmt:'yyyyMM'})" />
                         </div>
                     </div>
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             客服姓名
                         </label>
                         <div class="col-md-8">
                             <select id="CSID" type="select" class="easyui-combogrid ui-select" style="width:100%; border: 1px solid #ccc;padding-left: 5px;height: 30px;line-height: 28px;"></select>
                         </div>
                     </div>

                 </div>
                 <div class="row">
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             委托客戶
                         </label>
                         <div class="col-md-8">
                             <select id="CustomerID" type="select" class="easyui-combogrid ui-select" style="width:100%; border: 1px solid #ccc;padding-left: 5px;height: 30px;line-height: 28px;"></select>
                         </div>
                     </div>
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             最終客戶
                         </label>
                         <div class="col-md-8">
                             <select id="EndCustomerID" type="select" class="easyui-combogrid ui-select" style="width:100%; border: 1px solid #ccc;padding-left: 5px;height: 30px;line-height: 28px;"></select>
                         </div>
                     </div>
                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             客戶訂單號
                         </label>
                         <div class="col-md-8">
                             <input id="CustomerOrderNo" type="text"  class="form-control"/>
                         </div>
                     </div>

                     <div class="col-xs-3">
                         <label class="form-label col-md-4">
                             集團唯一業務單號
                         </label>
                         <div class="col-md-8">
                             <input id="GroupJobNo" type="text" class="form-control" />
                         </div>
                     </div>
               
                 </div>
             </div>
             <div class="gridPanel">
                  <table id="gridTable"></table>
             </div>
         </div>
    </div>
</div>