模组 前后端分离CURD 组件

js

(function () {
    // {# -------------------------------------------------------------------------- #}
        // {#全局变量:请求数据的全局变量字典#}
        var chaxundata = {};
        var requestURL = "/app02/db/";



        // {# -------------------------------------------------------------------------- #}
        // {#自定义方法#}
        function isEmptyObject(obj) {
　　          for (var key in obj){
　　　　        return false;//返回false，不为空对象
　　          }　　
　　          return true;//返回true，为空对象
        }

        // {#将以数据id去choice全局变量取对应的 中文显示信息#}
        function test(gname,gid) {
                // {#console.log(gname,gid);#}
                var ret = null;
                $.each(window[gname], function (k, item) {
                    if (item[0] == gid) {
                        ret = item[1];
                        return
                    }});
                return ret;
            }

        // {#自定义的 字符foo的方法#}
        String.prototype.foo = function (kwargs) {
            var v = this.replace(/{(w+)}/g,function (k,m) {
                return kwargs[m];
            });
            return v;
            };

        // {# -------------------------------------------------------------------------- #}

        // {#数据显示部分#}
        function init(yema,dc,t1){
        // {#通过ajax的方式去获取后端的数据#}

            // 请求的数据页码,默认为第一页
            // yema = 1;

            // 请求的数据显示数量,默认显示30条
            // dc = 30;

            // 请求数据的查询条件,默认为空
            // t1 = '';

            var yema = yema || 1;
            var dc = dc || 30;
            var t1 = t1 || '';
            chaxundata['yema'] = yema;
            chaxundata['dc'] = dc;
            $.ajax({
                url:requestURL,
                type:'GET',
                data:{"yema":yema,'dc':dc,'t1':t1},
                dataType:"JSON",
                success:function (arg) {
                    initchoice(arg.data_globe);
                    displaytitle(arg.data_config);
                    displaydata(arg.data_list,arg.data_config);
                    fenye(arg.fenye);
                }
            });
        }

        // {#choice数据类型，定义全局变量#}
        function initchoice(choice_dict) {
                $.each(choice_dict,function (i,j) {
                    window[i]=j;
                })
            }

        // {#将ajax回调函数中取出表格头部 然后通过循环标签的方式展现出数据来#}
        function displaytitle(title){
            var $tr = $("<tr>");
            $.each(title,function (x,y) {
                if(y.display){
                    var $th = $("<th>");
                    $th.html(y.title);
                    $tr.append($th);
                }});

            // {#先清空再显示数据#}
            $('#table_th').empty();
            $("#table_th").append($tr);
        }

        // {#将ajax回调函数中取出数据 然后通过循环标签的方式展现出数据来#}
        function displaydata(db,data_config) {

            // {#先清空再显示数据#}
            $('#table_td').empty();

            $.each(db,function (x,y) {
                var $tr = $("<tr>");
                $.each(data_config,function (x1,y1) {
                    if(y1.display){
                        var $td = $("<td>");
                        var text_v_ditc = {};

                            $.each(y1.text.v,function (k,v) {
                                 if(v.substring(0,2) === "@@"){
                                    var globle_name = v.substring(2,v.length);
                                    var data_list_v = y[y1.id];
                                    var t = test(globle_name,data_list_v);
                                    text_v_ditc[k] = t;

                                } else if(v[0] === '@'){
                                    text_v_ditc[k]=y[v.substring(1,v.length)];
                                }
                                else {
                                    text_v_ditc[k] = v
                                }

                                // {#配置td的属性值#}
                                $.each(y1.attrs,function (ii,jj) {
                                     if(jj[0] === '@'){
                                            $td.attr(ii,y[jj.substring(1,jj.length)]);
                                     }else {
                                            $td.attr(ii,jj)
                                     }
                                })
                            });
                            var xx = y1.text.k.foo(text_v_ditc);
                        $td.html(xx);
                        $tr.append($td);
                        $tr.attr('id',y.id)
                    }
                });
                $("#table_td").append($tr)
            })
        }

        // {# -------------------------------------------------------------------------- #}
        // {#分页#}
        function fenye(fy) {
            $(".pagination").empty();
            for (var i=1;i<=fy.zongpage;i++)
            {
                var $li = $('<li>').html($('<a>').html(i));
                if(i === fy.dangqianpage){
                    $li.addClass("active")
                }
                $li.on('click',function () {
                    chaxundata['yema'] = $(this).text();

                    if(chaxundata['t1']){
                        init(chaxundata['yema'],chaxundata['dc'],chaxundata['t1']);
                    }else {
                        init($(this).text());
                    }

                });
                $('.pagination').append($li);
            }
        }
        // {# -------------------------------------------------------------------------- #}

        // {#条件过滤#}
        $('.tjcx_b').on('click',function () {
            var t1 = $(".tjcx_i").val();
            chaxundata['t1'] = t1;
            init(chaxundata.yema,chaxundata.dc,t1);
        });

        // {# -------------------------------------------------------------------------- #}

        // {#保存/上传#}
         function bindsave(){
                $('#save').click(function () {
                    var postlist=[];
                    $('#table_td').find('tr[has-edit="true"]').each(function () {
                        var temp = {};
                        var id = $(this).attr('id');
                        temp['id'] = id;
                        $(this).children('[edit-enable="true"]').each(function () {
                            var name = $(this).attr('name');
                            var origin = $(this).attr('origin');
                            var newval = $(this).attr('new-val');
                            if(origin !== newval){
                                temp[name] = newval;
                            };
                        });

                        postlist.push(temp);
                        $.ajax({
                            url:requestURL,
                            type:'POST',
                            data:{'post_list':JSON.stringify(postlist)},
                            dataType:'Json',
                            success:function (arg) {
                                if(arg.status){
                                    // {#console.log(arg);#}
                                    var $msg = $('<span class="label label-primary">').html(arg['status']);
                                    $('.msg_warning').empty();
                                    $('.msg_warning').append($msg);
                                    init();
                                }else {
                                    alter(arg);
                                }}
                        })
                    })
                })}

        // {#全选/反选/取消#}
        function bindall() {
                $('#bindall').click(function () {
                    $('#table_td').find(':checkbox').each(function () {
                        if($('#bindbj').hasClass('btn-warning')){
                            if($(this).prop('checked')){

                            }else {
                                $(this).prop('checked',true);
                                var $cur = $(this).parent().parent();
                                bjhang($cur)
                            }
                        }else {
                            $(this).prop('checked',true);
                        };
                    })
                })
            }
        function unbindall() {
                  $('#unbindall').click(function () {
                      $('#table_td').find(':checked').each(function () {
                            if($('#bindbj').hasClass('btn-warning')){
                                $(this).prop('checked',false);
                                var $cur = $(this).parent().parent();
                                bjhangout($cur);
                            }else {
                                $(this).prop('checked',false);
                            }
                      })
                  })
            }
        function bindfx() {
                $('#bindfx').click(function () {
                      $('#table_td').find(':checkbox').each(function () {
                            if($('#bindbj').hasClass('btn-warning')){
                                var $cur = $(this).parent().parent();
                                if ($(this).prop('checked')){
                                    $(this).prop('checked',false);
                                    bjhangout($cur);
                                }else {
                                    $(this).prop('checked',true);
                                    bjhang($cur);
                                }
                            }else {
                                if ($(this).prop('checked')){
                                    $(this).prop('checked',false);
                                }else {
                                    $(this).prop('checked',true);
                                }
                            }
                      })
                  })
            }

         // {#绑定编辑控件#}
        function bindM() {
                $('#bindbj').click(function () {
                    var ed = $(this).hasClass('btn-warning');
                    if(ed){
                         $(this).removeClass('btn-warning');
                         $(this).text("进入编辑模式");
                         $('#table_td').find(':checked').each(function () {
                             var $cur = $(this).parent().parent();
                             bjhangout($cur);
                         })
                    }else {
                        $(this).addClass('btn-warning');
                        $(this).text("退出编辑模式");
                        $('#table_td').find(':checked').each(function () {
                             var $cur = $(this).parent().parent();
                             bjhang($cur);
                         })
                    }
                })
            }

        // {#绑定checkbox控件#}
        function bindC() {
            // 这种方式新增数据无法被选中#}
            $('#table_td').on('click',':checkbox',function () {
                if($('#bindbj').hasClass('btn-warning')){
                    var ck = $(this).prop('checked');
                    var $cur = $(this).parent().parent();
                    if(ck){
                        // {#console.log("进入编辑模式");#}
                        bjhang($cur)
                    }else{
                        // {#console.log("退出编辑模式");#}
                        bjhangout($cur)
                    }
                }
            })
        }

        // {#点击checkbox ,进入编辑模式后,将td部分内容变为可编辑内容#}
        function bjhang(cur) {
            cur.attr('has-edit','true');
            cur.children().each(function () {
                cur.addClass('success');
                var editenable = $(this).attr('edit-enable');
                var editetype = $(this).attr('edit-type');
                if (editenable === 'true'){
                    if(editetype === 'select'){
                        var globalname = $(this).attr("global-name");
                        var origin = $(this).attr("origin");
                        var sel = document.createElement('select');
                        sel.className = "form-control";
                        $.each(window[globalname],function (k,v) {
                            var op = document.createElement('option');
                            op.innerHTML = v[1];
                            op.setAttribute('value',v[0]);
                            $(sel).append(op)
                        });
                        $(sel).val(origin);
                        $(this).html(sel);
                    }else if(editetype === 'input'){
                        var intext = $(this).text();
                        var tag = document.createElement('input');
                        tag.className = "form-control";
                        tag.value = intext;
                        $(this).html(tag)
                    }
                }})
        }
        function bjhangout(cur) {
            cur.removeClass('success');
            cur.children().each(function () {
                var editenable = $(this).attr('edit-enable');
                if (editenable === 'true'){
                    var editetype = $(this).attr('edit-type');
                    if(editetype === 'select'){
                            var $select = $(this).children().first() ;
                            var newid = $select.val();
                            var newtext = $select[0].selectedOptions[0].innerHTML;
                            $(this).html(newtext);
                            $(this).attr('new-val',newid)

                    }else if(editetype === 'input'){
                        var $input2 = $(this).children().first() ;
                        var tag2 = $input2.val();
                        $(this).html(tag2);
                         $(this).attr('new-val',tag2)

                    }}})}

        // {# -------------------------------------------------------------------------- #}

        // {#主体函数#}
        $(document).ready(function () {
            init();
            shijian();
        });

         // {#数据 修改/全返取/保存#}
        function shijian() {
            // {#全选/反选/取消#}
            bindall();
            bindfx();
            unbindall();

            // {#保存/上传#}
            bindsave();

            // {#进入编辑/退出编辑#}
            bindM();
            bindC();
        }
        // {# -------------------------------------------------------------------------- #}
})()

HTML 

<div class="table-responsive">
                <div>
                    <input class="tjcx_i">
                    <button class="tjcx_b btn btn-sm btn-default">条件查询</button>
                </div>
                <br>
                <table class="table table-bordered">
                    <div>
                    <button id="bindall" type="button" class="btn btn-sm btn-default">全选</button>
                    <button id="bindfx" type="button" class="btn btn-sm btn-default">反选</button>
                    <button id="unbindall" type="button" class="btn btn-sm btn-default">取消</button>
                    <button id="bindbj" type="button" class="btn btn-sm btn-default">进入编辑模式</button>
                    <button id="save" type="button" class="btn btn-sm btn-default">保存</button>
                    <span class="msg_warning"></span>
                </div>
                <br>
                    <thead id="table_th"></thead>
                    <tbody id="table_td"></tbody>
                </table>
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                  </ul>
                </nav>
          </div>

后端数据接口定义:

def datal_interface(request):
    from app01.config_datalist import data_config
    from django.db.models import Q

    if request.method =="GET":

        # 获取查询参数
        yema = int(request.GET.get("yema", 1))
        t1 = request.GET.get('t1','')
        display_count = int(request.GET.get("dc", 10))

        data_value = []
        for i in data_config:
            if i['id']:
                data_value.append(i['id'])

        # 获取数据
        if t1:
            source_data = list(eval("""models.userinfo.objects.filter(%s).values(*data_value)""" % t1))
        else:
            source_data = list(models.userinfo.objects.values(*data_value))

        data_chose_sex = models.userinfo.sex_choose

        # 分页显示 ---------------------------------------------------
        # 总数据条数
        # 每页显示条数
        # 总页码
        # 当前页码 默认为 第一页

        start = display_count * (yema - 1)
        end = display_count * yema
        data = source_data[start:end]

        if divmod(len(source_data),display_count)[1] != 0:
            zong_paga = divmod(len(source_data),display_count)[0] + 1
        else:
            zong_paga = divmod(len(source_data),display_count)[0]

        fenye_dict = {
            'zongshuju':len(source_data),
            'meiyexianshi':display_count,
            'zongpage':zong_paga,
            'dangqianpage':yema
        }

        # 数据打包
        msg = {
            "data_config": data_config,
            "data_list": data,
            'data_globe': {"data_chose_sex": data_chose_sex},
            'fenye': fenye_dict
        }

        return HttpResponse(json.dumps(msg))

    elif request.method =="POST":
        content = json.loads(request.POST['post_list'])
        if content:
            for i in content:
                models.userinfo.objects.filter(id=i['id']).update_or_create(i)

        ret = {'status': '数据已经更新!'}
        return HttpResponse(json.dumps(ret))

字段配置文件:

# 单个@符号后面跟的是 数据变量
# 两个@@符号后面跟的是 需要到 全局变量中的取得key

# text:{} 示例:
# 必须要填,否则会报错:默认格式,'text': {'k': '{n}', 'v': {"n": "@数据字段"}},
# 生成特定的标签类型
# 'text':{'k':"<input type='checkbox' />",'v':{}},
# 生成指定格式的文本
# 'text':{'k':'{n}-{m}','v':{"n":"hello",:"m":"world"}},
# 生成指定字段
# @ 一个@ 表示获取数据中的数值,两个@@ 表示去全局变量中获取数据
# 'text':{'k':'{n}','v':{"n":"@@data_chose_sex"}},



data_config = [
    {
        "id":'',
        'display':1,
        'title':'选项',
        'text':{'k':"<input type='checkbox' />",'v':{}},
        'attrs':{},
    },
    {
        "id":'id',
        'display':1,
        'title':'ID',
        'text': {'k': '{n}', 'v': {"n": "@id"}},
        'attrs': {'name': 'id', "origin": '@id', 'edit-enable': 'true', 'edit-type': 'input'},
    },
    {
        "id":"name",
        "display":1,
        "title":"姓名",
        'text': {'k': '{n}', 'v': {"n": "@name"}},
        'attrs': {'name': 'name', "origin": '@name', 'edit-enable': 'false', 'edit-type': 'input'},
    },
    {
        "id":"sex",
        "display":1,
        "title":"性别",
        'text':{'k':'{n}','v':{"n":"@@data_chose_sex"}},
        'attrs': {'name': 'sex', "origin": '@sex', 'edit-enable': 'true', 'edit-type': 'select', "global-name": 'data_chose_sex'},
    },
    {
        "id":"old",
        "display":1,
        "title":"年龄",
        'text': {'k': '{n}', 'v': {"n": "@old"}},
        'attrs': {'name': 'old', "origin": '@old', 'edit-enable': 'true', 'edit-type': 'input'},
    },
    {
        "id":"phone",
        "display":1,
        "title":"联系方式",
        'text': {'k': '{n}', 'v': {"n":"@phone"}},
        'attrs': {'name': 'phone', "origin": '@phone', 'edit-enable': 'true', 'edit-type': 'input'},
    },
    {
        "id": "email",
        "display": 1,
        "title": "邮箱",
        'text': {'k':'{n}','v':{"n":"@email"}},
        'attrs': {'name': 'email', "origin": '@email', 'edit-enable': 'true', 'edit-type': 'input'},
    },
    {
        "id": "",
        "display": 1,
        "title": "操作",
        'text': {'k':'{n}','v':{"n":"<a href=http://www.baidu.com>删除</a>"}},
        'attrs': {},
    },
]