效果描述:1.不设置有效期,单击套餐类型时,执行帅选,
2.设置套餐类型,设置有效期,单击查询执行帅选
逻辑实现:
1.form表单添加onclick事件查询函数,点击form表单里的任何标签都触发查询事件,所以把'查询'图标写入form表单里,函数根据查询条件去执行相应的查询
<form class="form-inline" name="searchForm" role="form" onclick="searchPkg()"> <div class="form-group col-sm-2"> <label>套餐类型 : </label> <select name="pkg_type_id" id="pkg-type-id" class="form-control"> <option value="0">全部</option> {foreach from=$types item=type} <option value="{$type.pkg_type_id}">{$type.pkg_type_content}</option> {/foreach} </select> </div> <div class="form-group col-sm-3"> <label>起始有效期 : </label> <input class="form-control" id="validity-start-time" name="validity_start_time" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> </div> <div class="form-group col-sm-3"> <label>结束有效期 : </label> <input class="form-control" id="validity-end-time" name="validity_end_time" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> </div> <div class="form-group"> <a class="btn btn-danger">查询</a> </div> <div class="form-group "> <a class="btn btn-danger" href="pkg_base.php?act=add">添加</a> </div> </form>
获取查询条件执行函数,利用Ajax获取数据
function searchPkg() {
listTable.filter['pkg_type_id'] = Utils.trim(document.forms['searchForm'].elements['pkg_type_id'].value);
listTable.filter['validity_start_time'] = Utils.trim(document.forms['searchForm'].elements['validity_start_time'].value);
listTable.filter['validity_end_time'] = Utils.trim(document.forms['searchForm'].elements['validity_end_time'].value);
listTable.filter['page'] = 1;
listTable.loadList();
}