素人笔记记录法==》页面小功能实现(笔录)

折叠展开功能

1. 静态页面实现 

按钮
<button data-toggle="collapse" href="#basic">折叠/展开</button>

要折叠的对象

<div class="col-md-12 collapse in " id="basic">

注：href 与 div中的id 相绑定
注：data-toggle="collapse" 绑定的因素

2. js 实现

html

<div class="col-md-12 collapse in " id="basic"></div>

按钮 （onclick点击事件）
<button class="btn btn-default" type="button" onclick="zhedie()">折叠</button>


js 功能实现
function zhedie() {
    $('#basic').toggle();
    // $("#basic").fadeOut("slow");
}
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

JS获取url中的参数

function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
}


 $.ajax({
                type: "POST",
                url: "/admin/doc_list/delete/",
                data: {'id': getUrlParam('id'), 'url': getUrlParam('url')},
                async: false,
                error: function (request) {
                    //处理异常
                    toastr.warning('删除失败');
                },
                complete: function (data, status, XHR) {
                    //接收后台返回的结果
                    toastr.success('删除成功');
                     setTimeout(function () {
                        window.open("about:blank","_self").close()
                    }, 500);

                },
            });

实时检索输入框的值(联想关键词操作)

# python code
```
    @expose('/get_judgement/', methods=['GET'])
    def get_judgement(self):
        # 接受ajax传参值
        query = request.args.get('query')
        obj = 表连接对象.query(表名).filter(表名.字段名称.contains(query)).limit(10)
        obj_ls = [o.judgement for o in obj]
        # 返回jsonify 数据
        return jsonify({'code': 200, 'message': obj_ls})
```

# html code
```
# datalist是定义的标签，则input标签中list绑定的值与datalist的id值相同
<div class="col-lg-3">
    <input type="text" id="judgement" class="form-control" placeholder="结果查询..." name="name"
           list="judgements">
    <datalist id="judgements">

    </datalist>
</div>
```

# js code
```
// 判决结果
let courts = []
let flag = false;
$('#judgement').on('compositionstart', function () {
    flag = false;
    console.log('开始输入')
});
$('#judgement').on('compositionend', function () {
    flag = true;
    console.log('输入完成')
    $.ajax({
        type: "GET",
        url: "路由",
        data: {'query': $(this).val()},
        async: false,
        error: function (request) {
            toastr.warning('请求失败');
        },
        success: function (data) {
            //接收后台返回的结果
            $("#judgements").empty();
            judge = data.message;
            console.log(judge);
            for (let i = 0; i < judge.length; i++) {
                let judge_name = judge[i];
                $("#judgements").append('<option " value="' + judge_name + '"></option>');
            }
        }
    });
    console.log('查询完成')
});
```

前端只做显示不能修改，编辑跳转至新页面

target="_blank"      点击跳转至新页面

readonly  标签添加这个属性即可

required="required"   表示输入框为必选项

页面新增一项

1. 定位当前父级元素

let list_ = $(this).parent().parent(".list-group");

2. 克隆当前父级元素

let new_list_ = list_.clone()

3. 向元素中添加新的标识

new_list_.find('.panel-heading').css({"background-color":"lightblue"})

4. 修改以上的折叠展开中的关键词，id与href

　1): 生成关联词id

　　let tempTime = (new Date()).valueOf()

  2）：定位找寻出button按钮中元素

   let copy_button = new_list_.find("button[data-toggle='collapse']")

  3）：向目标元素添加 href 值

   copy_button.attr("href", copy_button.attr("href") + tempTime)

  4）：向要展开的元素添加id值

   let copy_dev = new_list_.find(".collapse")

  5）： 向目标展开元素添加id值

   copy_dev.attr("id", copy_dev.attr("id") + tempTime)

  6）： 向父级元素追加新元素

   list_.after(new_list_)

页面删除本项操作

1. 定位当前父级元素

let list_ = $(this).parent().parent(".list-group");

2. 获取当前标签的name值

let name = $(list_).data('name')

3. 返回当前同级标签 list_ 所有的name值

let list_count = $(this).parent().parent().siblings(`[data-name=${name}]`)

4. 判断如果list_count大于等于1则删除

if (list_count.length >= 1) {
    $(list__div).remove()
} else {
    toastr.info('请保留最后一项');
}

 Ajax 方式进行模板数据渲染

# 1. 构建搜索框

<div class="col-lg-3">
    <input type="text" id="judge" class="form-control" placeholder="数据查询..." name="judge"
           list="judges">
    <datalist id="judges">

    </datalist>
</div>


# 2. 目标模板渲染的位置

<div class="col-md-12 collapse in " id="basic">
    <div class="bootstrap-admin-panel-content">
        <table class="table table-bordered table table-hover">
        ···在这里{{使用jinja模板初始化渲染}}···
        </table>
    </div>
</div>


# 3. js代码

function on_submit() {
    var formdata = new FormData();
    formdata.append('litigation_program_name', $('#selected').val());
    formdata.append('judgement_name', $('#judgement').val());
    $.ajax({
        url: '/admin/basicview/select/',
        method: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        async: false,
        success: function (data) {
            console.log(data);
            # 关键点，获取成功返回值根据id替换
            $('#basic').html(data)
        }
    })
}
# 3.1 js代码搜索框使用关键词检索实现

let c = []
let flag = false;
$('#j').on('compositionstart', function () {
    flag = false;
    console.log('键盘开始输入')
});
$('#j').on('compositionend', function () {
    flag = true;
    console.log('键盘输入完成')
    $.ajax({
        type: "GET",
        url: "/admin/basicview/get_j/",
        data: {'query': $(this).val()},   # this获取当前输入的值
        async: false,
        error: function (request) {
            toastr.warning('请求失败');
        },
        success: function (data) {
            //接收后台返回的结果
            $("#j").empty();       # 该输入框清空
            ju = data.message;     # 接受返回成功结果
            console.log(ju);
            for (let i = 0; i < ju.length; i++) {
                let ju_name = judge[i];
                $("#j").append('<option " value="' + ju_name + '"></option>');
                # 该选项为下拉选项，需append追加到目标元素中
            }
        }
    });
    console.log('查询完成')
});


# 4. 后端

@expose('/select/', methods=('GET', 'POST'))
def select(self):
    # 简单逻辑写法
    if request.method == "POST":
        li_name = request.form.get('li_name','')
        ju_name = request.form.get('ju_name','')
        obj = get_session_case_tag(连接对象).query(表名).filter(条件).limit(条数)
        # 模板渲染
        return self.render('admin/casetag/select_basic.html', objs=obj)