thinkphp+js 查询样式
公司前端设计的新样式，后端封装数据 前端显示。
后端数据：
$soso = array(
array("title"=>"会员编号","name"=>"username","type"=>"text"),
array("title"=>"会员姓名","name"=>"nickname","type"=>"text"),
array("title"=>"推荐人编号","name"=>"tjuser","type"=>"text"),
array("title"=>"推荐人姓名","name"=>"tjname","type"=>"text"),
array("title"=>"安置人编号","name"=>"gluser","type"=>"text"),
array("title"=>"安置人姓名","name"=>"glname","type"=>"text"),
array("title"=>"注册时间","name"=>"regtime","type"=>"time"),
array("title"=>"区位","name"=>"pos","type"=>"select","list"=>array(1=>"左区",2=>"右区")),
array("title"=>"注册等级","name"=>"rankreg","type"=>"select","list"=>array(0=>"初级会员",1=>"中级会员",2=>"高级会员",3=>"银钻会员",4=>"金钻会员")),
array("title"=>"当前级别","name"=>"rank","type"=>"select","list"=>array(0=>"初级会员",1=>"中级会员",2=>"高级会员",3=>"银钻会员",4=>"金钻会员")),
array("title"=>"加入周","name"=>"periods","type"=>"text"),
array("title"=>"生日","name"=>"birth","type"=>"text"),
array("title"=>"性别","name"=>"sex","type"=>"select","list"=>array("男"=>"男","女"=>"女")),
array("title"=>"团队领导人编号","name"=>"team_user","type"=>"text"),
array("title"=>"团队领导人姓名","name"=>"team_name","type"=>"text"),
array("title"=>"状态","name"=>"state","type"=>"select","list"=>array(0=>"未激活",1=>"已激活")),
array("title"=>"停用","name"=>"isstop","type"=>"select","list"=>array(0=>"未停用",1=>"已停用")),
array("title"=>"注销","name"=>"iscancel","type"=>"select","list"=>array(0=>"未注销",1=>"已注销")),
);
$data = input('get.');
$soso=CreateSosoInfo($soso,$data);
$this->assign('soso',$soso);
公共方法：
**
* 生成前台筛选搜索
* @param unknown $soso
* @param unknown $data
*/
function CreateSosoInfo($soso,$data=null,$join=FALSE){
foreach ($soso as $key => $val) {
$soso[$key]['paixu'] = 10000+$key;
foreach ($data as $k => $v) {
if($join){
if(strpos($k,'_')){
$k = substr_replace($k,'.',1,1);
//$key = str_replace('_','.',$key);
}
}
if(trim($v['0']) == 'time'){
if($val['name'] == $k){
$soso[$key]['value'] = trim($v['1']).'|'.trim($v['2']);
$soso[$key]['status'] = trim($v['3']);
$soso[$key]['paixu'] = trim($v['4']);
}
}else if (trim($v['0']) == 'between'){
if($val['name'] == $k){
$soso[$key]['value'] = trim($v['1']).'|'.trim($v['2']);
$soso[$key]['status'] = trim($v['3']);
$soso[$key]['paixu'] = trim($v['4']);
}
}else{
if($val['name'] == $k && is_array($v)){
$soso[$key]['value'] = trim($v['1']);
$soso[$key]['status'] = trim($v['2']);
$soso[$key]['paixu'] = trim($v['3']);
}else if($val['name'] == $k){
$soso[$key]['value'] = $v;
$soso[$key]['status'] = 'and';
$soso[$key]['paixu'] = trim($v['3']);
}
}
}
}
array_multisort(array_column($soso,'paixu'),SORT_ASC,$soso);
return json_encode($soso);
}
前台页面：
<div style="padding:10px 0px;">
<a class="btn btn-danger radius size-S" href="<{:get_excel_url()}>">
<i class="Hui-iconfont Hui-iconfont-daochu"></i> 导出
</a>
<a class="btn btn-warning radius size-S" href="javascript:location.replace(location.href);">
<i class="Hui-iconfont Hui-iconfont-huanyipi"></i> 刷新
</a>
<div class="operation" style="float:right; padding:5px 10px;">
<span class="dropDown">
<a class="dropDown_A" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">更多操作
<i class="Hui-iconfont Hui-iconfont-zhongtumoshi"></i>
</a>
<ul class="dropDown-menu menu radius box-shadow">
<li><a href="javascript:;" class="sx">筛选</a></li>
</ul>
</span>
</div>
</div>
<div class="fiter-box" style="display: none" >
<form action="">
<div class="input-box cl">
<div class="aorn">
<span>添加：</span>
<input type="button" data-etxe="and" class="btn btn-primary radius size-MINI" value="且">
<input type="button" data-etxe="or" class="btn btn-success radius size-MINI" value="或">
<input type="button" data-etxe="not in" class="btn btn-danger radius size-MINI" value="非">
</div>
<div class="otherBtn">
<input type="button" style="display:none" value='<{$soso}>' id="divstr" name="divstr"/>
<button class="btn btn-primary radius size-S">确定</button>
<span class="slidup-btn">收起<i class="Hui-iconfont Hui-iconfont-arrow2-top"></i></span>
</div>
</div>
</form>
<div class="laebl-box">
</div>
</div>
js获取数据后渲染页面：
$(function(){
if($("#divstr").length>0) {
var val=$('#divstr').val();
var data = $.parseJSON(val);
} else{
return;
}
var paixu=0;
//面板展开收起
$(".sx").click(function(){
$(".fiter-box").slideDown("fast");
})
$(".slidup-btn").click(function(){
$(".fiter-box").slideUp("fast");
})
//加载页面时根据数据遍历添加筛选条件
var laeblBox = $(".laebl-box");
var aorn = $(".aorn");
var isval=0;
for (var i=0;i<data.length;i++){
var str,
rowId = "c"+i+"",
val = data[i].value,
dataType = data[i].type,
dataTitle = data[i].title,
dataName = data[i].name,
dataList = data[i].list;
//加载条件checkbox框
str = '<div class="check-box">'+
'<input type="checkbox" id="c'+i+'" data-type="'+dataType+'" data-tit="'+dataTitle+'" data-name="'+dataName+'">'+
'<label for="c'+i+'">'+data[i].title+'</label>'+
'</div>'
laeblBox.append(str);
if(val){//判断如果有value值时渲染元素
isval=1;
var status = data[i].status;
render(status,dataTitle,dataType,dataName,rowId,dataList,val);
$(".check-box").eq(i).find("input[type='checkbox']").attr("checked","checked");
}
}
if(isval>0){
$(".fiter-box").show();
}
//页面加载时移除第一个条件的前置或且非
$(".input-box .row:first-child").find(".btn").remove();
//多选框change事件触发加载DOM函数
var inputCheck = $(".fiter-box input[type='checkbox']");
var aorn = $(".aorn");
var aornBtn = aorn.find("input[type='button']");
var aornVal,aornText,aornClass;
aornBtn.click(function(){
//获取且或非的值
aornVal = $(this).attr("data-etxe");
})
inputCheck.change(function(){
var rowLen = $(".row").length;
var cId = $(this).attr("id");
var cType = $(this).attr("data-type");
var cTit = $(this).attr("data-tit");
var cname = $(this).attr("data-name");
var checked = $(this).prop('checked');
if(checked && !aornVal && rowLen>0 ){//如果是选中状态并且没有选择且或非
layer.tips('请选择并列条件', '#'+cId+'', {
tips: [1, '#0FA6D8']
});
$(this).attr("checked",false)
}else if(checked && cType !=="select"){//如果是选中状态并且选择了且或非并且type不是select值
$(this).attr("checked","checked");
render(aornVal,cTit,cType,cname,cId);
}else if(checked && cType=="select"){
//如果是选中状态并且选择了且或非并且type是select值
var tit = $(this).attr("data-tit");
for(var d=0;d<data.length;d++){
if(data[d].name == cname){//根据name值取到list数据
var opList = data[d].list;
}
}
render(aornVal,cTit,cType,cname,cId,opList);
}else{//取消勾选后根据Id值删除对应的元素
$("#r-"+cId).remove();
}
//移除第一个条件的前置或且非
$(".input-box .row:first-child").find(".btn").remove();
})
//加载渲染Dom
function render(sta,otit,otype,oname,rowId,olis,value){
paixu++;
var rId = "r-"+rowId+"";//渲染元素的父级div的ID；
olis?olis:olis="";//判断传没传list值，如果没传，值就为空
value?value:value="";//判断传没传value值，如果没传，值就为空
var arValCn;
if(sta == "and" ){
arValCn = "且"
}else if(sta == "or"){
arValCn = "或"
}else{
arValCn = "非"
}
if(otype == "text"){
var str =
'<div class="row" id="'+rId+'">'+
'<input type="hidden" name="'+oname+'[]" value="text">'+
'<input type="button" class="btn radius size-MINI fl" value="'+arValCn+'">'+
'<label>'+otit+'：</label>'+
'<input type="text" class="input-text size-S" value="'+value+'" name="'+oname+'[]">'+
'<input type="hidden" name="'+oname+'[]" value="'+sta+'">'+
'<input type="hidden" name="'+oname+'[]" value="'+paixu+'">'+
'</div>';
aorn.before(str);
addBtnClass(rId,arValCn);
}else if(otype == "time"){
var str =
'<div class="row" id="'+rId+'">'+
'<input type="hidden" name="'+oname+'[]" value="time">'+
'<input type="button" class="btn radius size-MINI fl" value="'+arValCn+'">'+
'<label>'+otit+'：</label>'+
'<input type="text" class="input-text size-S chose-date time1" name="'+oname+'[]">'+
'- <input type="text" class="input-text size-S chose-date time2" name="'+oname+'[]">'+
'<input type="hidden" name="'+oname+'[]" value="'+sta+'">'+
'<input type="hidden" name="'+oname+'[]" value="'+paixu+'">'+
'</div>';
aorn.before(str);
addBtnClass(rId,arValCn)
if(value != ""){//如果有value值就拆分成数组绑定元素的value;
value = value.split("|");
$("#"+rId).find(".time1").val(value[0]);
$("#"+rId).find(".time2").val(value[1]);
}else{//如果没有value值渲染的元素的value值就为空
$("#"+rId).find(".time1").val();
$("#"+rId).find(".time2").val();
}
}
else if(otype == "between"){
var str =
'<div class="row" id="'+rId+'">'+
'<input type="hidden" name="'+oname+'[]" value="between">'+
'<input type="button" class="btn radius size-MINI fl" value="'+arValCn+'">'+
'<label>'+otit+'：</label>'+
'<input type="text" class="input-text size-S bet1" name="'+oname+'[]">'+
'- <input type="text" class="input-text size-S bet2" name="'+oname+'[]">'+
'<input type="hidden" name="'+oname+'[]" value="'+sta+'">'+
'<input type="hidden" name="'+oname+'[]" value="'+paixu+'">'+
'</div> '
aorn.before(str);
addBtnClass(rId,arValCn);
if(value != ""){
value = value.split("|");
$("#"+rId).find(".bet1").val(value[0]);
$("#"+rId).find(".bet2").val(value[1]);
}else{
$("#"+rId).find(".bet1").val();
$("#"+rId).find(".bet2").val();
}
}
else if(otype == "select"){
var str =
'<div class="row" id="'+rId+'">'+
'<input type="hidden" name="'+oname+'[]" value="selecct">'+
'<input type="button" class="btn radius size-MINI fl" value="'+arValCn+'">'+
'<label>'+otit+'：'+
'<span class="select-box">'+
'<select class="select" size="1" name="'+oname+'[]">'+
'</select>'+
'</span>'+
'<input type="hidden" name="'+oname+'[]" value="'+sta+'">'+
'<input type="hidden" name="'+oname+'[]" value="'+paixu+'">'+
'</label>' +
'</div> '
aorn.before(str);
addBtnClass(rId,arValCn);
if(olis!="" && value !=""){//如果有list值和value值
var optStr="";
for(var v in olis){//遍历list对象
if(v == value){//如果list对象的key值与value值相同则是选中状态
optStr = '<option value='+v+' selected>'+olis[v]+'</option>';
}else{
optStr = '<option value='+v+'>'+olis[v]+'</option>';
}
$("#r-"+rowId+"").find("select").append(optStr);
}
}else{//没有list值和value值
var optStr="";
for(var v in olis){
optStr = '<option value='+v+'>'+olis[v]+'</option>';
$("#r-"+rowId+"").find("select").append(optStr);
}
}
}
};
function addBtnClass(id,sta){
if(sta == "且"){
$("#"+id).find(".btn").addClass("btn-primary");
}else if(sta == "或"){
$("#"+id).find(".btn").addClass("btn-success");
}else{
$("#"+id).find(".btn").addClass("btn-danger");
}
}
})
css 样式
/*按钮样式*/
.btn-primary{background-color:#57add9;border-color:#57add9 }
.btn.size-L{font-size: inherit;padding:0 15px;line-height: normal;height:34px;line-height: 34px;}
a.btn.size-L{line-height: 34px;}
.select-box{width:118px;padding:2px 0;margin-right: 15px;height:27px;}
.select-box select{height:100%;}
.select-box-s{width:51px;}
.select-box-m{width:66px;}
/*.fiter-box全字段查询面板*/
.fiter-box .fl{float: left;margin:0 10px;}
.fiter-box{padding:10px 20px;box-sizing: border-box;background:#292a33;color:#fff;border-right: 1px solid #d9d9d9;border-left: 1px solid #d9d9d9;}
.fiter-box .input-box{margin-bottom: 20px;}
.fiter-box .input-box .row{margin:0 0 15px 0;float: left;}
.fiter-box .input-box .aorn{float: left;margin-left: 20px;}
.fiter-box input[type="text"]{width:112px;margin-right: 5px;background:none;color:#fff;}
.fiter-box .laebl-box label{margin-right: 20px;}
.fiter-box .check-box{padding: 0;margin-right: 25px;}
.fiter-box .check-box label{margin:0;}
.fiter-box .input-box .otherBtn{float: left;margin-left: 20px;}
.otherBtn .slidup-btn{margin-left: 20px;cursor: pointer;}
.sh-btn{display: none;float: left;}
.fiter-box .check-box input[type="checkbox"]{position: absolute;top:0;left:0;opacity: 0;display:block;}
.fiter-box select{background:none;color:#fff;}
.fiter-box select option{color:#000;background-color: #fff;}
/*多选框样式*/
.check-box{position: relative;padding:0;}
.check-box input[type="checkbox"]{position: absolute;top:0;left:0;display: none;}
.check-box label{display: inline-block;padding-left:20px;margin-right:20px;background:url(../images/check1.png) no-repeat left center;background-size: 14px 14px;cursor: pointer;}
.check-box input[type="checkbox"]:checked+label{background: url(../images/check2.png) no-repeat left center;background-size: 14px 14px;}
/*单选框样式*/
.radio-box{position: relative;padding:0;}
.radio-box input[type="radio"]{position: absolute;top:0;left:0;display: none;}
.radio-box label{display: inline-block;padding-left:20px;margin-right:20px;background:url(../images/radio1.png) no-repeat left center;background-size: 14px 14px;cursor: pointer;}
.radio-box input[type="radio"]:checked+label{background: url(../images/radio2.png) no-repeat left center;background-size: 14px 14px;}
写到这里基本完成了，前端页面用的layer，所以页面样式代码不全。
这套查询样式主要是后台把请求查询的数据封装成soso数组，然后通过CreateSosoInfo把前台页面传到后台的值封装到soso数组里。通过js渲染到页面上。查询的字段自动通过排序显示到前面。
写的不好，请多多指教。。。。。。
