基于js的CURD插件

前言：

每个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':''}},#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标签变更为文本