素人笔记记录法==》页面小功能实现(笔录)
折叠展开功能
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)
