概述
前言：
每个web程序对数据库的创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作都是必不可少的，于是我决定开发一个基于JavaScript和jQuery框架的插件，通过后端灵活配置，联动前端页面内容；即实现了前后端分离，也可以在后期项目中随时随地得快速应用；
day94
1、定制显示标签的属性属性
后端：
table_config=[ { 'q': None, 'title': '选择', 'display': True, 'text': {'tpl': '<input type="checkbox" value="{nid}" />', 'kwargs': {'nid': '@id'}}, 'attr':{'class':'c1','nid':'@id'}, }, { 'q': 'id', 'title': 'ID', 'display':False, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@id'}}, 'attr': {}, }, {'q':'hostname', #去数据库获取的字段 'title':'主机名',#table 种 th的标题内容 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1':'@hostname','a2':'666'}},#table中td 的内容 'attr': {'class': 'c1'}, }, {'q':'sn', 'title': '序列号', 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@sn'}}, 'attr': {'class': 'c1'}, }, {'q':'os_platform', 'title': '系统', 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@os_platform'}}, 'attr': {'class': 'c1'}, }, {'q': 'os_version', 'title': '系统版本', 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@os_version'}}, 'attr': {'class': 'c1'}, }, {'q': 'business_unit__name', 'title': '业务线', 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@business_unit__name'}}, 'attr': {'class': 'c1'}, }, { 'q': None, 'title': '操作', 'display': True, 'text': {'tpl': '<a href="/edit/{nid}/">编辑</a> | <a href="/del/{uid}/">删除</a> ', 'kwargs': {'nid': '@id', 'uid': '@id'}}, }, {'q': 'server_status_id', 'title': '服务器状态', 'display': True, 'text': {'tpl': '{a1}', 'kwargs': {'a1': '@@status_choices'}}, 'attr': {'class': 'c1'}, #2个@的开头规则去global_choices_dict，获取status_choices对应的选择信息 }, ]
前端
$.each(v.attr, function (attrname, attrvalue) {
if (attrvalue[0] == '@') {
attrvalue = row_dict[attrvalue.substring(1, attrvalue.length)]
}
td.setAttribute(attrname, attrvalue)
//setAttribute设置td的属性
知识点：
0、str[0]
这种取值方式兼容性更好
1、attrvalue.substring(1, attrvalue.length)
js字符串按索引截取内容 str.substring(开始索引，结束索引)
2、td.setAttribute(属性名, 属性值) js对象
通过js给html设置标签属性
2、分页
后端：（扩展分页插件，支持点击页码，执行js函数事件）
def page_html_test(self): page_list = [] if self.current_page == 1: prev = ' <li><a href="#">上一页</a></li>' else: prev = ' <li><a num="%s">上一页</a></li>' %(self.current_page-1,) page_list.append(prev) half_show_pager_count = int(self.show_pager_count / 2) # 数据特别少，15条数据=2页 if self.max_pager_num < self.show_pager_count: # 页码小于11 pager_start = 1 pager_end = self.max_pager_num + 1 else: if self.current_page <= half_show_pager_count: pager_start = 1 pager_end = self.show_pager_count + 1 else: if self.current_page + half_show_pager_count > self.max_pager_num: pager_start = self.max_pager_num - self.show_pager_count + 1 pager_end = self.max_pager_num + 1 else: pager_start = self.current_page - half_show_pager_count pager_end = self.current_page + half_show_pager_count + 1 for i in range(pager_start, pager_end): if i == self.current_page: tpl = ' <li class="active"><a num="%s" >%s</a></li>' % (i,i,) else: tpl = ' <li><a num="%s" >%s</a></li>' % (i, i,) page_list.append(tpl) if self.current_page == self.max_pager_num: nex = ' <li><a href="#">下一页</a></li>' else: nex = ' <li><a num="%s">下一页</a></li>' %(self.current_page+1,) page_list.append(nex) return ''.join(page_list)
前端：
/* 处理表分页 */
function initPageHtml(page_html) {
$('#pagination').empty().append(page_html);
}
//扩展jquery的方法
jq.extend({
'nBlist': function (url) {
requesturl = url;
inint(1);
},
"changePage": function (pageNum) {
init(pageNum);
}
})
知识点：
基于分页插件在后端返回页码给前端；
模板语言：通过a标签点点点想后端获取想要访问的数据库行数
js: 点击 通过jQuery的扩展方法，$.扩展方法 执行js函数，把访问的页码通过参数传入js函数，js函数发送ajax给后端获取数据数据；
3、组合搜素
组合搜素html讲解：
lable标签：显示+号右侧的内容
button 标签：用于生产下拉按钮，显示ul中li的内容
最右侧input或者select标签：是事件绑定生成的
<div class="input-group"> <!--input-group 引用的bootstarp --> <div class="input-group-btn"> <label class="btn btn-default no-radius" type="button" style="width: 100px;"></label> lable标签：显示+号右侧的内容 <button type="button" class="btn btn-default dropdown-toggle no-border-r" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
button 标签用于生产下拉按钮，显示ul中li的内容
<ul class="change-search-condition dropdown-menu"> </ul> </div> </div> <!--引用的bootstarp -->
1、处理搜素条件下拉框
前端html
<div class="search-area clearfix"> <!-- 组合搜索条件开始 --> <div id="searchCondition" class="search-condition col-md-offset-2 col-md-8"> <!-- 单条搜索条件开始 --> <div class="condition"> <!-- 单条搜索条件 + 图标区域开始 --> <div class="icons"> <a class="btn btn-default"> <i class="fa fa-plus-square"></i> </a> </div> <!-- 单条搜索条件 + 图标区域结束 --> <!-- 单条搜索条件 + 图标右侧区域开始 --> <div class="input-group"> <div class="input-group-btn"> <label class="btn btn-default no-radius" type="button" style="width: 100px;"></label> <button type="button" class="btn btn-default dropdown-toggle no-border-r" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> <ul class="change-search-condition dropdown-menu"> </ul> </div> </div> <!-- 单条搜索条件 + 图标右侧区域开始 --> </div> <!-- 单条搜索条件结束 --> <!-- 组合搜索条件开始 --> </div> <div class="search-btn col-md-offset-10 col-md-2"> <a class="btn btn-primary">搜索</a> </div> </div>
前端js
生成 input 或者 select
/* 处理搜素条件 第1个下拉框，绑定事件联通生成右侧 input */ function initSeachCondition(seachconfig) { /* 如果没有初始化*/ if (!$('#searchCondition').attr('init')) { var $ul = $('#searchCondition :first').find('ul'); $ul.empty(); initDefaultSearchCondition(seachconfig[0]);/*初始化搜素区域的 input的显示 */ $.each(seachconfig, function (i, iteams) { var li = document.createElement('li'); var a = document.createElement('a'); a.innerHTML = iteams.title; a.setAttribute('name', iteams.name); a.setAttribute('type', iteams.type); if (iteams.type == 'select') { a.setAttribute('choice_name', iteams.choice_name); } li.append(a); $ul.append(li); }); $('#searchCondition').attr('init','true'); } }
如果是第一次应该初始化
function initDefaultSearchCondition(item) { // item={'name': 'hostname','title':'主机名','type':'input'}, if (item.type == 'input') { var tag = document.createElement('input'); tag.setAttribute('type', 'text'); // $(tag).addClass('form-control no-radius') tag.className = "form-control no-radius"; tag.setAttribute('placeholder', '请输入条件'); tag.setAttribute('name', item.name); } else { var tag = document.createElement('select'); tag.className = "form-control no-radius"; tag.setAttribute('name', item.name); $.each(GlOBAL_CHOICES_DICT[item.choice_name], function (i, row) { var op = document.createElement('option'); op.innerHTML = row[1]; op.setAttribute('value', row[0]); $(tag).append(op); }) } $('#searchCondition').find('.input-group').append(tag); $('#searchCondition').find('.input-group label').text(item.title); }
知识点：
1、
var $ul =$('#searchCondition :first').find('ul');
jQuery查找标签下的第一个孩子 筛选器 frist
2、
<div class="search-area clearfix">
bootstrap的属性clearfix，子标签float之后，撑起父级标签；
bootstarp的col-md-offset-2 offset属性本质是float ；
2、搜素区域的input标签
给condition中url里面的li绑定事件，搜素下拉框切换，联动input标签切换
前端js
function bindSearchConditionEvent() { $('#searchCondition ul').on('click', 'li', function () { //$this 指得是li标签 <li><a href=""></a></li> //找到lable标签，修改内容 $(this).parent().prev().prev().text($(this).text()); //根据li的设置的属性 创建input 或者select标签 $(this).parent().parent().next().remove(); var name = $(this).find('a').attr('name'); var type = $(this).find('a').attr('type'); if (type == 'select') { var choice_name = $(this).find('a').attr('choice_name'); var tag = document.createElement('select'); tag.className = "form-control no-radius"; $.each(GlOBAL_CHOICES_DICT[choice_name], function (i, item) { var op = document.createElement('option'); op.innerText = item[1]; op.setAttribute('value', item[0]); $(tag).append(op); }); } else { var tag = document.createElement('input'); tag.className = "form-control no-radius"; tag.setAttribute('placeholder', '请输入条件'); tag.setAttribute('name', name); } $(this).parent().parent().after(tag) }) }
克隆多个搜素条件
1、首先给 图标 + 设置一个 add-condition 属性
<!-- 单条搜索条件 + 图标区域开始 --> <div class="icons"> <a class="btn btn-default add-condition" > <i class="fa fa-plus-square"></i> </a> </div> <!-- 单条搜索条件 + 图标区域结束 -->
js
// 添加搜素条件 $('#searchCondition .add-condition').click(function () { var $condition=$(this).parent().parent().clone(); $condition.find('.add-condition').removeClass('add-condition').addClass('del-condition').find('i').attr('class','fa fa-minus-square'); $condition.appendTo($('#searchCondition')); }); // 删除搜素条件 $('#searchCondition').on('click','.del-condition',function () { var $condition=$(this).parent().parent().remove(); })
2、每次点击页面都要把搜素条件传到后端
function inint(pageNum) { $('#loading').removeClass('hide'); var condition = getSearchCondition(); $.ajax({ url: requesturl, type: 'GET', dataType: 'JSON', data: {'pageNum': pageNum,'condition':condition},
生成这种数据
Q()组合复杂的搜素条件
con=Q() #创建Q对象
print(con)
执行结果
4、编辑模式
进入：把文本变更为input和select标签
退出：把input或者select标签变更为文本
转载于:https://www.cnblogs.com/sss4/p/7665711.html
最后
以上就是无聊诺言为你收集整理的基于js的CURD插件的全部内容，希望文章能够帮你解决基于js的CURD插件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复