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> 托单确认</a> <a id="lr-print" class="btn btn-default" onclick="btn_print()"><i class="fa fa-print"></i> 托单打印</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> 导出</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>
