封装一个搜索的功能

最新推荐文章于 2024-05-08 08:59:55 发布

feiyan939

最新推荐文章于 2024-05-08 08:59:55 发布

阅读量604

点赞数 1

分类专栏：封装文章标签：封装搜索功能

本文链接：https://blog.csdn.net/feiyan939/article/details/77962936

版权

封装专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>可选日期范围的jQuery时间日期插件</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js" language="javascript"></script>
    <script type="text/javascript" src="js/share.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style>
        .table > thead > tr > th {
            padding: 2px;
        }
        .tj {
            width: 150px;
        }
        .ui-datepicker-time {
            width: 222px;
        }
        select {
            height: 28px;
            width: 221px;
        }
        .ui-datepicker-time {
            margin: 0px;
        }
        .table {
            margin-bottom: 6px;
        }
    </style>
</head>

<body>
<input type="button" id="selectBtn" name="selectBtnName" value="筛选"/>
<div class="containerr" style="display: none;">
    <div class="selectBox">
        <div class="col-sm-4">
            <form id="filterForm">
                <table class="table table-bordered" id="filterTable">
                    <thead>
                    <tr>
                        <th class="text-left tj">过滤条件</th>
                        <th class="text-right">
                            <img class="imgClose" src="./css/overcast/images/close.png" width="30px" height="30px">
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </form>
            <div class="text-right">
                <button class="sure">确认</button>&emsp;<button class="unSure">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="datakj" style="display: none">
    <input type="text" class="ui-datepicker-time" readonly value=""/>
    <div class="ui-datepicker-css">
        <div class="ui-datepicker-choose">
            <div class="ui-datepicker-date">
                <input name="startDate" id="startDate" class="startDate" readonly value="2017/08/20" type="text">—
                <input name="endDate" id="endDate" class="endDate" readonly value="2017/08/20" type="text" disabled οnchange="datePickers()">
            </div>
        </div>
    </div>
</div>
<script>

    /*   $("#id").zc_filter({
     "params": Cond,
     "event": onsure
     });*/


    //序列化表单数据调用方式
    function transfer(formId) {
        var jsonuserinfo = $('#' + formId).serializeObject();
        return jsonuserinfo;
    }

//序列化表单内容具体实现过程
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $.ajax({
        url: './1.json',
        type: 'post',
        success: function (params) {
            $('#selectBtn').zc_filter(params, function (res) {
                console.log(res);
            });
        }
    });
    // 方法
    $.fn.zc_filter = function (params, callback) {
        var data = params;
        //点击筛选按钮
        var containerr = $('.containerr');
        $(this).on('click', function () {//点击筛选把表格中可以筛选的字段也显示出来
            //取消绑定事件
            var $shaixuan = $(this);
            $shaixuan.unbind('click');
            //把表格对象保存起来
            var filterTableObj = $('#filterTable');
            //显示表格
            containerr.css('display', 'block');
            //1.把要筛选的字段都显示出来
            //1.1开始获取后台的数据
            //1.1.1解析json，遍历每一个key,之后得到它的value的值++++判断是什么类型的，然后将这些类型追加在表格里面
            for (var i in data) {
                //文本类型
                if (data[i].valtype == '00') {
                        filterTableObj.append("<tr>" +
                                "<td>" + data[i].caption +
                                "</td>" +
                                "<td>" +
                                "<input type='text' value='' name='" + data[i].name + "'/> " +
                                "</td></tr>");
                        //text样式
                        var $tab = $("#filterTable");
                        $tab.find('input[type="text"]').css('width', '221px');
                        $tab.find('input[name="startDate"]').css('width', '');
                        $tab.find('input[name="endDate"]').css('width', '');
                        $(".ui-datepicker-date").css("padding-top", "10px");
                        continue;
                }
                //下拉框类型
                if (data[i].valtype == '01') {
                    var selectStr = "<select name='" + data[i].name + "'>";
                    //获取下拉框的字符串
                    var optionList = data[i].data;
                    var opListArr = optionList.split('|');
                    for (var w in opListArr) {
                        var optionObj = JSON.parse("{" + opListArr[w] + "}");//将拼接成字符串之后转换成对象然后进行取key和value
                        for (var key in optionObj) {
                            selectStr += '<option value="' + key + '">' + optionObj[key] + '</option>';
                        }
                    }
                    filterTableObj.append("<tr><td>" + data[i].caption + "</td><td>" + selectStr + "</td></tr>");
                    continue;
                }
                //日期范围控件
                if (data[i].valtype == '02') {
                    var $kj = $('.datakj');
                    $kj.find("input:eq(0)").attr("name",data[i].name);
                    var datakj = $kj.css('display', 'block').get(0);
                    filterTableObj.append("<tr><td>" + data[i].caption + "</td><td id='td2'></td></tr>");
                    $("#td2").get(0).appendChild(datakj);
                    continue;
                }
            }

            //再给筛选一个事件，可以让其继续筛选
            $(this).on('click', function () {
                containerr.css('display', 'block');
                //clearForm('filterForm');
            });
        });
        //确认
        $('.sure').on('click', function () {
            //获取填写的相应的内容然后隐藏给后端一个标志
            var formData = transfer('filterForm');
            delete formData.startDate;
            delete formData.endDate;
            callback(formData);
            //隐藏整个表格和按钮
            containerr.css('display', 'none');
        });
        //取消
        $('.unSure').on('click', function () {
            containerr.css('display', 'none');
        });
        //点击图片的叉号
        $('.imgClose').on('click', function () {
            containerr.css('display', 'none');
        });
    };
    //清空表单数据
    function clearForm(formId) {
        $("#" + formId).find('input, textarea').each(function () {
            $(this).val("");
        });
    };
</script>
</body>
</html>

json格式如下：

feiyan939

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装一个搜索的功能

html>head lang="en"> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=Edge"/> title>可选日期范围的jQuery时间日期插件title> link type="text/css" rel="stylesheet" href="css/bootst
复制链接

扫一扫