devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django之CURD插件_django cms curd

作者：weixin_40725706 | 2024-08-27 08:21:33

赞

踩

django cms curd

什么是CURD?

CURD顾名思义就是create,update,rearch,delete(所谓的增删改查).

当我们接到一个项目的时候,夸夸夸的就写完表结构,然后就一直写增删改查,增删改查,写了一个月,看似很认真效率很高，但是这里我要严肃的告诉你。你只需要一个配置文件就可以完成对表进行增删改查.什么???你不信?？and那么看看。

1.配置文件

配置文件需要放上面?

1.confi [{'q':数据库的字段名,

　　　　'title':表单的head名

　　　　'display' :1/0 是否可以显示

　　　　text:{content:.....

　　　　　　kwargs:{......}}}]

2.数据库内容

3.全局变量,主要针对的是choice

4.分页

  1.         msg={
  2.             'config':config,
  3.             'data_list':list(data_list),
  4.             'global_dict':{
  5.                 'user_choice':models.UserInfo.user_choice,
  6.             },
  7.             'page_str':page_str,
  8.         }
  9.  
  10.  
  11.  config = [
  12.             {
  13.                 'q': None,
  14.                 'title': '选项',
  15.                 'display': 1,
  16.                 'text': {
  17.                     'content':'<input type="checkbox"/>'
  18.                 },
  19.                 'attrs': {},
  20.             },
  21.             {
  22.                 'q': 'id',
  23.                 'title': 'ID',
  24.                 'display': 0,
  25.                 'text':None,
  26.                 'attrs': {},
  27.             },
  28.             {
  29.                 'q': 'username',
  30.                 'title': '姓名',
  31.                 'display': 1,
  32.                 'text':{'content':'{username}',
  33.                         'kwargs':{'username':'@username'}},
  34.                 'attrs': {'edit-enalbe':'true','edit-type':'input',
  35.                           'name':'username','origin':'@username'},
  36.             },
  37.             {
  38.                 'q': 'user_type',
  39.                 'title': '用户类型',
  40.                 'display': 1,
  41.                 'text': {'content': '{n}',
  42.                          #               @@ 后面的数据是要选择的元组
  43.                          #                和一个@的区分开
  44.                          'kwargs': {'n': '@@user_choice'}},
  45.                 'attrs': {'edit-enalbe':'true', 'edit-type':'select'
  46.                            ,'global-name':'user_choice','origin':'@user_type',
  47.                           'name':'user_type'},
  48.             },
  49.             {
  50.                 'q': 'nickname',
  51.                 'title': '昵称',
  52.                 'display': 1,
  53.                 'text': {'content': '{nick}',
  54.                          'kwargs': {'nick': '@nickname'}},
  55.                 'attrs': {'edit-enalbe': 'true', 'edit-type': 'input',
  56.                           'name':'nickname','origin':'@nickname'},
  57.  
  58.             },
  59.             {
  60.                 'q': 'user2blog__surfix',
  61.                 'title': '博客地址',
  62.                 'display': 1,
  63.                 'text': {'content': '{n}',
  64.                          'kwargs': {'n': '@user2blog__surfix'}},
  65.                 'attrs': {'edit-enalbe':'fault'},
  66.  
  67.             },
  68.             {
  69.                 'q': None,
  70.                 'title': '操作',
  71.                 'display': 1,
  72.                 'text': {'content': '<a href="/index-{nid}">{m}</a>',
  73.                          'kwargs': {'nid': '@id',"m":'查看详细'}},
  74.                 'attrs': {},
  75.             },
  76.         ]

从上面可以看出来,我们根据q为字段去数据库中拿数据

  1. q_list =[]
  2.         for item in config:
  3.             if not item['q']:
  4.                 continue
  5.             q_list.append(item['q'])
  6.         data_list_count = models.UserInfo.objects.all().values(*q_list)

放在列表里面的是我们想要拿到的数据库字段名数据.

操作没有数据则q为None

2.初始化table的head

  1.   function initHead(config) {
  2.         $('#talbe_th').empty();
  3.         var tr = $('<tr></tr>');
  4.         $.each(config,function (k,v) {
  5.             if (v.display){
  6.                 var th=$('<th></th>');
  7.                 th.html(v.title);
  8.                 tr.append(th)
  9.             }
  10.         });

3.{}的格式化

在配置文件中可以看到,conten:'{username}-{id}'

{}里面只的是我们需要格式化的内容,js没有格式化的函数,那么需要我们自定制.

  1.     String.prototype.format = function (kwargs) {
  2.         var ret = this.replace(/\{(\w+)\}/g,function (km,m) {
  3. //               {username}-{id}
  4. //                匹配成功后,km等于{username}和{id}, m等于 username和id
  5. //                'kwargs':{'username':'chenxuming','id':'1'}}
  6.             return kwargs[m]
  7.                             });
  8.         return ret
  9.     };

通过自定制,我们可以用.format方法进行格式化.

4.一个@

配置文件中有一个@的符号的代表取数据库中的数据.

如何取?

**思路**

嵌套三层循环

1.第一层:

数据库取到的数据循环,主要是循环取到数据库的行数........一行用一个tr标签

2.第二层,循环配置文件的config列表,列表嵌套了多个字典

每一个字典创建一个td标签

因为每一行都要有n列数据,字典里就有n个需要循环遍历.

3.第三层循环:
循环每一个config_values里的kwargs('kwargs':{'username':'@username','id':'@id'})
将带@符号的kwargs字典值替换数据库的值,没带的则不对应放在新的字典里 new_kwargs
最后将new_kwargs进行格式化转换

  1. function initBody(config,data_list) {
  2.         $("#table_tb").empty();
  3.  
  4. //       第一层
  5.  $.each(data_list,function (data_key,data_values) {
  6.             var tr = $('<tr></tr>');
  7.             tr.attr('row-id',data_values['id']);
  8.  
  9. //           第二层,循环配置文件的config列表
  10. //                 一个字典里:  {
  11. //               'q': 'username',
  12. //               'title': '姓名',
  13. //               'display': 1,
  14. //               'text':{'content':'{username}-{id}',
  15. //                       'kwargs':{'username':'@username','id':'@id'}
  16.         $.each(config,function (config_key,config_values) {
  17.             if (config_values.display){
  18.                 var new_kwargs={};
  19.                 var td=$('<td></td>');
  20.  
  21. //                   第三层
  22. $.each(config_values.text.kwargs,function (key,values) {else if (values[0]=='@'){
  23. //                                 有一个@的代表去数据库的值
  24.                                 new_kwargs[key] = data_values[values.substring(1,values.length)];
  25.                             }
  26.                             else{
  27.                                 new_kwargs[key] = values
  28.                             }
  29.                             }
  30.                             );
  31.                 var temp = config_values.text.content.format(new_kwargs);
  32.                     td.html(temp);
  33.                     tr.append(td)
  34.                 }
  35.                             });
  36.             $("#table_tb").append(tr);
  37.  
  38.         })
  39.     }

这里执行了initBody(config,data_list)初始化了body

5.两个@

有两个@的代表了在choice取数据,编辑的时候生成select框.

**思路**

1,在config里@@后面的内容是choice存放元组的字段名,而''q''里存放的是choice选择的字段名.Intergerfile)

  1. {
  2.                 'q': 'user_type',
  3.                 'title': '用户类型',
  4.                 'display': 1,
  5.                 'text': {'content': '{n}',
  6.                          #               @@ 后面的数据是要选择的元组
  7.                          #                和一个@的区分开
  8.                          'kwargs': {'n': '@@user_choice'}},
  9.                 'attrs': {'edit-enalbe':'true', 'edit-type':'select'
  10.                            ,'global-name':'user_choice','origin':'@user_type',
  11.                           'name':'user_type'},
  12.             },

2.在前端初始化把choice元组设置成全局变量,因为很多地方都可以用到.

  1.     function initglobal(global_dict) {
  2. //       设置全局变量;
  3. //       'global_dict':{
  4. //               'user_choice':models.UserInfo.user_choice,}
  5. //       拿到的是字符串,想要user_choice=models.UserInfo.user_choice
  6. //        等于
  7. //      window['user_choice']=models.UserInfo.user_choice
  8.         $.each(global_dict,function (k,v) {
  9.             window[k] =v
  10.         })
  11.     }

3.在全局变量里获取@@的值

  1. 放在第三个循环里.
  2. 两个@@是if
  3. 一个@是else if
  4. if (values.substring(0,2) =='@@'){
  5.                             // {#有两个@代表取choice里的值
  6. //                               user_choice=(
  7. //                                   (1,'普通用户'),
  8. //                                   (2,'VIP'),
  9. //                               )
  10.                                 var global_name = values.substring(2,values.length);
  11.                                 var current_id = data_values[config_values.q];
  12.                                 var ret = GetTextFromGlobalById(global_name,current_id);
  13.                                 new_kwargs[key] =ret
  14.                             }
  15.  
  16. function GetTextFromGlobalById(global_name,current_id) {
  17.         var ret = null;
  18.         $.each(window[global_name],function (k,item) {
  19. //           console.log(item,current_id)
  20. //               [1, "普通用户"]      1
  21. //               [2, "VIP"]          1
  22. //               [1, "普通用户"]      1
  23. //               [2, "VIP"]          1
  24. //          如果 item[0] == current_i 返回内容 return跳出循环
  25.             if (item[0] == current_id){
  26.                 ret = item[1];
  27.                 return
  28.             }
  29.         });
  30.         return ret
  31.     }

6.设置attr(标签的属性)

给标签设置attr属性.

可编辑,不可编辑,编辑类型.

设置attr在第二层循环的时候加一层.和并列第三层

  1. //                         循环attrs,将属性和值赋值给标签.
  2. //                      'attrs': {'edit': 'true', 'edit-type': 'select'},
  3.                     $.each(config_values.attrs,function (attrs_key,attrs_values) {
  4.                             if (attrs_values[0]=='@'){
  5.                                 td.attr(attrs_key,data_values[attrs_values.substring(1,attrs_values.length)])
  6.                             }
  7.                             else{
  8.                                 td.attr(attrs_key,attrs_values)
  9.                                 }
  10.                         });

在这里设置attr的时候可以通过@的符号来获取数据库的值.

跨表的时候q用__来跨表''q'':'FK__'

7.简单的使用

1.选项:

  1. {
  2.     'q': None,
  3.     'title': '选项',
  4.     'display': 1,
  5.     'text': {
  6.         'content':'<input type="checkbox"/>'
  7.     },
  8.     'attrs': {},
  9.  
  10. },
  11.  
  12. 2.不显示的
  1. {
  2.     'q': 'id',
  3.     'title': 'ID',
  4.     'display': 0,
  5.     'text':None,
  6.     'attrs': {},
  7.  
  8. },
  9. 3.显示且可以编辑的:
  1. {
  2.     'q': 'username',
  3.     'title': '姓名',
  4.     'display': 1,
  5.     'text':{'content':'{username}',
  6.             'kwargs':{'username':'@username'}},
  7.     'attrs': {'edit-enalbe':'true','edit-type':'input',
  8.               'name':'username','origin':'@username'},
  9.  
  10. },
  11. 4.跨表....显示不可编辑的:
  1. {
  2.     'q': 'user2blog__surfix',
  3.     'title': '博客地址',
  4.     'display': 1,
  5.     'text': {'content': '{n}',
  6.              'kwargs': {'n': '@user2blog__surfix'}},
  7.     'attrs': {'edit-enalbe':'fault'},
  8.  
  9. },
  10. 5.choice类型:
  1. {
  2.     'q': 'user_type',
  3.     'title': '用户类型',
  4.     'display': 1,
  5.     'text': {'content': '{n}',
  6.              #               @@ 后面的数据是要选择的元组
  7.              #                和一个@的区分开
  8.              'kwargs': {'n': '@@user_choice'}},
  9.     'attrs': {'edit-enalbe':'true', 'edit-type':'select'
  10.                ,'global-name':'user_choice','origin':'@user_type',
  11.               'name':'user_type'},
  12. },
  13. 6.操作类型.
  1. {
  2.     'q': None,
  3.     'title': '操作',
  4.     'display': 1,
  5.     'text': {'content': '<a href="/index-{nid}">{m}</a>',
  6.              'kwargs': {'nid': '@id',"m":'查看详细'}},
  7.     'attrs': {},
  8. },

https://www.cnblogs.com/chenxuming/p/9253361.html

 

CURD

　　CURD是一个数据库技术中的缩写词，一般的项目开发的各种参数的基本功能都是CURD。作用是用于处理数据的基本原子操作。

　　它代表创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作。

核心

　　1.前端页面通过ajax方式请求后台数据库数据

　　2.后台 配置文件 指定字段去数据库取相应的字段返回给前端ajax

　　3.前端通过jquery 实现前端页面数据修改,将修改数据再次通过ajax返回给后台

 

具体实现

　　前端ajax获取数据

　　　　在js自执行函数中,写入代码,定义全局变量 requestURL,方便后面传入新的ajax 提交路径,以ajax以get方式去后台获取数据. 获取到后台 result 数据,将其传递到 对应函数执行

复制代码

  1. requestURL = null;
  2.  
  3. function init(pager) {
  4.                 $.ajax(
  5.                     {
  6.                         url:requestURL,
  7.                         data:{'pager':pager},
  8.                         type:'GET',
  9.                         dataType:'JSON',
  10.                         success:function (result) {
  11.                             initchoice(result.choice_dict);
  12.                             initheader(result.table_config);
  13.                             initbody(result.table_config,result.info)
  14.  
  15.                         }
  16.                     }
  17.                 )
  18.             };

复制代码

　　

　　定义配置文件(整合 前端/数据库数据/显示样式)

　　　　在后台 视图页面定义一个配置文件:

　　　　数据结构为: 列表[字典方式]

　　　　　　id , 作为数据库中的字段.

　　　　　　title,前端显示的字段名

　　　　　　display,是否在前端显示

　　　　　　text,在前端可定义显示内容

　　　　　　attrs,样式定义,提交name定义,修旧数值定义,文本类型定义(input?select?其他)

复制代码

  1. table_config = [
  2.             {
  3.                 'id': None,
  4.                 'title': '选项',
  5.                 'display': 1,
  6.                 'text': {'key': "<input type='checkbox' />", 'val': {}},
  7.                 'attrs': {},
  8.             },
  9.             {
  10.                 'id':'id',
  11.                 'title':'ID',
  12.                 'display':1,
  13.                 'text':{'key':"{n}",'val':{'n':'@id'}},
  14.                 'attrs':{},
  15.             },
  16.             {
  17.                 'id': 'title',
  18.                 'title': '标题',
  19.                 'display': 1,
  20.                 'text': {'key': "{n}", 'val': {'n': '@title'}},
  21.                 'attrs': {'name':'title',"origin":'@title','edit-enable':'true','edit-type':'input'},
  22.             },
  23.             {
  24.                 'id': 'status',
  25.                 'title': '状态',
  26.                 'display': 1,
  27.                 'text': {'key': "{n}", 'val': {'n': '@@device_type_choice'}},
  28.                 'attrs': {'name':'status',"origin":'@status','edit-enable':'true','edit-type':'select',"global-name":'device_type_choice'},
  29.             },
  30.             {
  31.                 'id': 'pro_id',
  32.                 'title': '处理人',
  33.                 'display': 1,
  34.                 'text': {'key': "{n}", 'val': {'n': '@@device_type_userinfo'}},
  35.                 'attrs': {'name':'pro_id',"origin":'@pro_id','edit-enable':'true','edit-type':'select',"global-name":'device_type_userinfo'},
  36.             },
  37.             {
  38.                 'id': 'sol',
  39.                 'title': '处理详情',
  40.                 'display': 1,
  41.                 'text': {'key': "{n}", 'val': {'n': '@sol'}},
  42.                 'attrs': {'name': 'sol', "origin": '@sol', 'edit-enable': 'true', 'edit-type': 'input'},
  43.             },
  44.             {
  45.                 'id': None,
  46.                 'title': '操作',
  47.                 'display': 1,
  48.                 'text': {'key': "<a href='#'>添加</a>|<a href='#'>删除</a>", 'val': {}},
  49.                 'attrs': {},
  50.             },
  51.         ]

复制代码

　　　　数据库表(贴出来做参考的,上面只是截取了表中部分字段显示)

复制代码

  1. class Fault(models.Model):
  2.     id = models.AutoField(primary_key=True,null=False)
  3.     title = models.CharField(max_length=20,verbose_name="报障标题")
  4.     detail = models.TextField(verbose_name="报障详细信息")
  5.     user_id = models.ForeignKey('Userinfo',
  6.                                 to_field='uid',
  7.                                 on_delete=models.CASCADE,
  8.                                 verbose_name="报障人",
  9.                                 related_name='u')
  10.     choice = (
  11.         (1, '待处理'),
  12.         (2, '处理中'),
  13.         (3, '已处理'),
  14.     )
  15.     status = models.IntegerField(choices=choice,verbose_name='处理状态',default=1)
  16.     ctime = models.DateTimeField(null=False, auto_now_add=True, verbose_name='创建时间')
  17.     pro = models.ForeignKey('Userinfo',
  18.                             to_field='uid',
  19.                             on_delete=models.CASCADE,
  20.                             verbose_name="处理人",
  21.                             null=True,
  22.                             blank=True,
  23.                             related_name='p',
  24.                             )
  25.     sol = models.TextField(null=True,verbose_name="解决方案")
  26.     ptime = models.DateTimeField(null=True)

复制代码

 

　　获取冲数据库中获取指定字段数据　　

　　　　视图将配置文件中id字段循环出来加入到zd列表列表中,然后去数据库中取指定字段的数据,将其整合到result字典中,转为json字符串传递到 前端ajax 回到函数中.

复制代码

  1. def ajaxdate(request):
  2.     import json
  3.     if request.method == "GET":
  4.         table_config = [...]
  5.         zd = []
  6.         for i in table_config:
  7.             if i['id']:
  8.                 zd.append(i['id'])
  9.         info = models.Fault.objects.values(*zd).all()
  10.         choice = models.Fault.choice
  11.         userinfo = models.Userinfo.objects.all().values_list('uid','uname')
  12.  
  13.         result = {
  14.             'table_config':table_config,
  15.             'info':list(info),
  16.             'choice_dict':{'device_type_choice':choice,'device_type_userinfo':list(userinfo)},
  17.         }
  18.  
  19.         return HttpResponse(json.dumps(result))

复制代码

 

　　ajax回到执行函数(显示表头、显示主体数据、添加html全局变量)

　　这样就将后台的表头,数据都显示到前端

复制代码

  1.            // {#列表表头显示部分#}
  2.             function initheader(table_config) {
  3.                 var tr = document.createElement('tr');
  4.                 $.each(table_config,function (k,item) {
  5.                     var th = document.createElement('th');
  6.                     if (item.display){
  7.                         th.innerHTML = item.title;
  8.                         $(tr).append(th);
  9.                     }
  10.                 });
  11.                 $('#table_th').empty();
  12.                 $('#table_th').append(tr);
  13.             }
  14.  
  15.             // {#列表数据显示部分#}
  16.             function initbody(table_config,info){
  17.                 $('#table_td').empty();
  18.                 $.each(info,function (i,j) {
  19.                     var tr = document.createElement('tr');
  20.                     tr.setAttribute('j-id',j['id']);
  21.                     var dictinfo = {};
  22.                     $.each(table_config,function (x,y) {
  23.                          if (y.display) {
  24.                              $.each(y.text.val,function (k,v) {
  25.                                  if(v.substring(0,2) ==='@@'){
  26.                                     var gname = v.substring(2,v.length);
  27.                                     var gid = j[y.id];
  28.                                     var t = test(gname,gid);
  29.                                     dictinfo[k] =t;
  30.  
  31.                                  }else if (v[0] ==='@'){
  32.                                      dictinfo[k] = j[v.substring(1,v.length)];
  33.                                  }else {
  34.                                      dictinfo[k] = v;}
  35.                              });
  36.                          var td = document.createElement('td');
  37.                          var ss = y.text.key.format(dictinfo);
  38.                          td.innerHTML = ss;
  39.  
  40.                          $.each(y.attrs,function (q,t) {
  41.                              if(t[0] === '@'){
  42.                                  td.setAttribute(q,j[t.substring(1,t.length)]);
  43.                              }else {
  44.                                  td.setAttribute(q,t)
  45.                              }
  46.                          });
  47.  
  48.                          $(tr).append(td);}
  49.                     });
  50.                     $('#table_td').append(tr)})}
  51.  
  52.             // {#choice数据类型，定义全局变量#}
  53.             function initchoice(choice_dict) {
  54.                 $.each(choice_dict,function (i,j) {
  55.                     window[i]=j;
  56.                 })
  57.             }
  58.  
  59.             // {#将以数据id去choice全局变量取对应的 中文显示信息#}
  60.             function test(gname,gid) {
  61.                 var ret = null;
  62.                 $.each(window[gname], function (k, item) {
  63.                     if (item[0] === gid) {
  64.                         ret = item[1];
  65.                         return
  66.                     }
  67.                 });
  68.                 return ret;
  69.             }

复制代码

 

　　前端html 添加操作按钮

复制代码

  1.     <h1>用户信息</h1>
  2.     <div class="btn-group" role="group" aria-label="...">
  3.       <button id="bindall" type="button" class="btn btn-default">全选</button>
  4.       <button id="bindfx" type="button" class="btn btn-default">反选</button>
  5.       <button id="unbindall" type="button" class="btn btn-default">取消</button>
  6.       <button id="bindbj" type="button" class="btn btn-default">进入编辑模式</button>
  7.       <button type="button" class="btn btn-default">批量删除</button>
  8.       <button id='save' type="button" class="btn btn-default">保存</button>
  9.     </div>
  10.         <table class="table table-bordered table-hover">
  11.             <thead id="table_th"></thead>
  12.             <tbody id="table_td"></tbody>
  13.         </table>

复制代码

 

　　自定义format字符串方法

复制代码

  1. // {#自定义的 字符format的方法#}
  2.             String.prototype.format = function(kwargs){
  3.               var ret = this.replace(/\{(\w+)\}/g,function (k,m) {
  4.                   return kwargs[m]
  5.               });
  6.               return ret
  7.             };

复制代码

 

　　用jquery绑定事件

复制代码

  1.             function bindsave(){
  2.                 $('#save').click(function () {
  3.                     var postlist=[];
  4.                     $('#table_td').find('tr[has-edit="true"]').each(function () {
  5.                         var temp = {};
  6.                         var id = $(this).attr('j-id');
  7.                         temp['id'] = id;
  8.                         $(this).children('[edit-enable="true"]').each(function () {
  9.                             var name = $(this).attr('name');
  10.                             var origin = $(this).attr('origin');
  11.                             var newval = $(this).attr('new-val');
  12.                             if(origin != newval){
  13.                                 temp[name] = newval;
  14.                             };
  15.                         })
  16.                         postlist.push(temp);
  17.                         $.ajax({
  18.                             url:requestURL,
  19.                             type:'POST',
  20.                             data:{'post_list':JSON.stringify(postlist)},
  21.                             dataType:'Json',
  22.                             success:function (arg) {
  23.                                 if(arg.status){
  24.                                     init(1);
  25.                                 }else {
  26.                                     alter(arg);
  27.                                 }
  28.                             }
  29.  
  30.                         })
  31.  
  32.                     })
  33.  
  34.                 })
  35.             }
  36.             function bindM() {
  37.                 $('#bindbj').click(function () {
  38.                     var ed = $(this).hasClass('btn-warning');
  39.                     if(ed){
  40.                          $(this).removeClass('btn-warning');
  41.                          $(this).text("进入编辑模式");
  42.                          $('#table_td').find(':checked').each(function () {
  43.                              var $cur = $(this).parent().parent();
  44.                              bjhangout($cur);
  45.                          })
  46.                     }else {
  47.                         $(this).addClass('btn-warning');
  48.                         $(this).text("退出编辑模式");
  49.                         $('#table_td').find(':checked').each(function () {
  50.                              var $cur = $(this).parent().parent();
  51.                              bjhang($cur);
  52.                          })
  53.                     }
  54.                 })
  55.             }
  56.             function bindC() {
  57.                 // {#$('#table_td').find(':checkbox').click()
  58.                 // 这种方式新增数据无法被选中#}
  59.                 $('#table_td').on('click',':checkbox',function () {
  60.                     if($('#bindbj').hasClass('btn-warning')){
  61.                         var ck = $(this).prop('checked');
  62.                         var $cur = $(this).parent().parent();
  63.                         if(ck){
  64.                             // {#console.log("进入编辑模式");#}
  65.                             bjhang($cur)
  66.                         }else{
  67.                             // {#console.log("退出编辑模式");#}
  68.                             bjhangout($cur)
  69.                         }
  70.                     }
  71.                 })
  72.             }
  73.             function bjhang(cur) {
  74.                 cur.attr('has-edit','true');
  75.                 cur.children().each(function () {
  76.                     cur.addClass('success');
  77.                     var editenable = $(this).attr('edit-enable');
  78.                     var editetype = $(this).attr('edit-type');
  79.                     if (editenable === 'true'){
  80.                         if(editetype === 'select'){
  81.                             var globalname = $(this).attr("global-name");
  82.                             var origin = $(this).attr("origin");
  83.                             var sel = document.createElement('select');
  84.                             sel.className = "form-control";
  85.                             $.each(window[globalname],function (k,v) {
  86.                                 var op = document.createElement('option');
  87.                                 op.innerHTML = v[1];
  88.                                 op.setAttribute('value',v[0]);
  89.                                 $(sel).append(op)
  90.                             });
  91.                             $(sel).val(origin);
  92.                             $(this).html(sel);
  93.  
  94.                         }else if(editetype === 'input'){
  95.                             var intext = $(this).text();
  96.                             var tag = document.createElement('input');
  97.                             tag.className = "form-control";
  98.                             tag.value = intext;
  99.                             $(this).html(tag)
  100.                         }
  101.                     }})}
  102.             function bjhangout(cur) {
  103.                 cur.removeClass('success');
  104.                 cur.children().each(function () {
  105.                     var editenable = $(this).attr('edit-enable');
  106.                     if (editenable === 'true'){
  107.                         var editetype = $(this).attr('edit-type');
  108.                         if(editetype === 'select'){
  109.                                 var $select = $(this).children().first() ;
  110.                                 var newid = $select.val();
  111.                                 var newtext = $select[0].selectedOptions[0].innerHTML;
  112.                                 $(this).html(newtext);
  113.                                 $(this).attr('new-val',newid)
  114.  
  115.                         }else if(editetype === 'input'){
  116.                             var $input2 = $(this).children().first() ;
  117.                             var tag2 = $input2.val();
  118.                             $(this).html(tag2);
  119.                              $(this).attr('new-val',tag2)
  120.  
  121.                         }}})}
  122.             function bindall() {
  123.                 $('#bindall').click(function () {
  124.                     $('#table_td').find(':checkbox').each(function () {
  125.                         if($('#bindbj').hasClass('btn-warning')){
  126.                             if($(this).prop('checked')){
  127.  
  128.                             }else {
  129.                                 $(this).prop('checked',true);
  130.                                 var $cur = $(this).parent().parent();
  131.                                 bjhang($cur)
  132.                             }
  133.                         }else {
  134.                             $(this).prop('checked',true);
  135.                         };
  136.                     })
  137.                 })
  138.             }
  139.             function unbindall() {
  140.                   $('#unbindall').click(function () {
  141.                       $('#table_td').find(':checked').each(function () {
  142.                             if($('#bindbj').hasClass('btn-warning')){
  143.                                 $(this).prop('checked',false);
  144.                                 var $cur = $(this).parent().parent();
  145.                                 bjhangout($cur);
  146.                             }else {
  147.                                 $(this).prop('checked',false);
  148.                             }
  149.                       })
  150.                   })
  151.             }
  152.             function bindfx() {
  153.                 $('#bindfx').click(function () {
  154.                       $('#table_td').find(':checkbox').each(function () {
  155.                             if($('#bindbj').hasClass('btn-warning')){
  156.                                 var $cur = $(this).parent().parent();
  157.                                 if ($(this).prop('checked')){
  158.                                     $(this).prop('checked',false);
  159.                                     bjhangout($cur);
  160.                                 }else {
  161.                                     $(this).prop('checked',true);
  162.                                     bjhang($cur);
  163.                                 }
  164.                             }else {
  165.                                 if ($(this).prop('checked')){
  166.                                     $(this).prop('checked',false);
  167.                                 }else {
  168.                                     $(this).prop('checked',true);
  169.                                 }
  170.                             }
  171.                       })
  172.                   })
  173.             }

复制代码

 

完整代码

html - 模板

复制代码

  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4.     <meta charset="UTF-8">
  5. {#    <title>Title</title>#}
  6.     <!--单独子版的title-->
  7.     <title>{% block title %}{% endblock %}</title>
  8.  
  9.     <!--单独子版的css-->
  10.     {% block css %}{% endblock %}
  11.         <style>
  12.         .item{
  13.  
  14.         }
  15.          .title{
  16.              font-size: 20px;
  17.          }
  18.          .content{
  19.              margin-left: 30px;
  20.          }
  21.         .content a{
  22.             display: block;
  23.         }
  24.     </style>
  25.     <link type="text/css" rel="stylesheet" href="/static/css/muban-css.css">
  26.     <link rel="stylesheet" href="/static/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
  27. </head>
  28. <body>
  29.  
  30. {#头部 start#}
  31.     <div class="pg-header">
  32.         <!--共享的-->
  33.         {#头部菜单导航条#}
  34.         <div class="logo left">Anec后台管理</div>
  35.         <div class="hl-menu left">
  36.             <a href="#" class="item">菜单一</a>
  37.             <div class="item-set">
  38.                 <a href="#" class="item">菜单二</a>
  39.                 <div class="sets hide">
  40.                     <a href="#" >菜单二1</a>
  41.                     <a href="#" >菜单二2</a>
  42.                     <a href="#" >菜单二3</a>
  43.                 </div>
  44.             </div>
  45.             <div class="item-set">
  46.                 <a href="#" class="item">菜单三</a>
  47.                 <div class="sets hide">
  48.                     <a href="#" >菜单三1</a>
  49.                     <a href="#" >菜单三2</a>
  50.                     <a href="#" >菜单三3</a>
  51.                 </div>
  52.             </div>
  53.             <div class="item-set">
  54.                 <a href="#" class="item">菜单四</a>
  55.                 <div class="sets hide">
  56.                     <a href="#" >菜单四1</a>
  57.                     <a href="#" >菜单四2</a>
  58.                     <a href="#" >菜单四3</a>
  59.                 </div>
  60.             </div>
  61.  
  62.         </div>
  63.         {#个人消息通知栏#}
  64.         <div class="hr-menu right">
  65.              <a href="#" class="item"><i class="fa fa-envelope" aria-hidden="true"></i>消息</a>
  66.              <a href="#" class="item"><i class="fa fa-phone-square" aria-hidden="true"></i>通知</a>
  67.              <a href="#" class="item"><i class="fa fa-server" aria-hidden="true"></i>任务</a>
  68.             <div class="avatar">
  69.                 <a href="#" class="item">
  70. {#                    <img src="111.jpg" >#}
  71.                     <i class="fa fa-user-circle-o fa-2x" aria-hidden="true"></i>
  72.                 </a>
  73.                 <div class="sets hide">
  74.                     <a href="#" >菜单1</a>
  75.                     <a href="#" >菜单2</a>
  76.                     <a href="#" >菜单3</a>
  77.                 </div>
  78.             </div>
  79.  
  80.         </div>
  81.     </div>
  82. {#头部 end#}
  83.  
  84. {#div_body start #}
  85.     <div class="pg-body">
  86.     {#body-菜单栏 start#}
  87.         <div class="menus">
  88.             <!--共享的-->
  89.             <div class="item">
  90.                 <div class="item-title"><a>功能1</a></div>
  91.                 <div class="item-content ">
  92.                     <a href="/clbzd-ck">报障单</a>
  93.                     <a>功能1-2</a>
  94.                     <a>功能1-3</a>
  95.                 </div>
  96.             </div>
  97.             {% block menu %}{% endblock %}
  98.         </div>
  99.     {#body-菜单栏 end#}
  100.  
  101.     {#body-内容栏 start#}
  102.         <div class="countents">
  103.             <!--单独显示的-->
  104.             <div class="countents-top">
  105.  
  106.             </div>
  107.             <div class="countent">
  108.                 {% block countent %}{% endblock %}
  109.             </div>
  110.         </div>
  111.     {#body-内容栏 end#}
  112.     </div>
  113. {#div_body end #}
  114.  
  115. {#div foot start#}
  116.     <div class="pg-foot">
  117.         <!--共享的-->
  118.     </div>
  119. {#div foot end#}
  120.  
  121.     <!--单独子版js-->
  122.     {% block js %}{% endblock %}
  123.  
  124. </body>
  125. </html>

复制代码

 

html 代码

复制代码

  1. {% extends "htmb.html" %}
  2.  
  3. {% block css %}
  4.     <link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  5. {% endblock %}
  6.  
  7. {% block js %}
  8.     <script src="/static/js/jquery-1.7.1.min.js"></script>
  9.     <script src="/static/js/cmdbzj.js"></script>
  10.     <script>
  11.         $(function () {
  12.             $.NB( '/ajax-date.html')
  13.         })
  14.  
  15.     </script>
  16. {% endblock %}
  17.  
  18. {% block title %}
  19. {% endblock %}
  20.  
  21. {% block menu %}
  22. {% endblock %}
  23.  
  24. {% block countent %}
  25.     <h1>用户信息</h1>
  26.     <div class="btn-group" role="group" aria-label="...">
  27.       <button id="bindall" type="button" class="btn btn-default">全选</button>
  28.       <button id="bindfx" type="button" class="btn btn-default">反选</button>
  29.       <button id="unbindall" type="button" class="btn btn-default">取消</button>
  30.       <button id="bindbj" type="button" class="btn btn-default">进入编辑模式</button>
  31.       <button type="button" class="btn btn-default">批量删除</button>
  32.       <button id='save' type="button" class="btn btn-default">保存</button>
  33.     </div>
  34.         <table class="table table-bordered table-hover">
  35.             <thead id="table_th"></thead>
  36.             <tbody id="table_td"></tbody>
  37.         </table>
  38. {% endblock %}

复制代码

 

封装的JS代码

复制代码

  1. // 自执行函数
  2. (function () {
  3.             requestURL = null;
  4.  
  5.             // {#自定义的 字符format的方法#}
  6.             String.prototype.format = function(kwargs){
  7.               var ret = this.replace(/\{(\w+)\}/g,function (k,m) {
  8.                   return kwargs[m]
  9.               });
  10.               return ret
  11.             };
  12.  
  13.             function bindsave(){
  14.                 $('#save').click(function () {
  15.                     var postlist=[];
  16.                     $('#table_td').find('tr[has-edit="true"]').each(function () {
  17.                         var temp = {};
  18.                         var id = $(this).attr('j-id');
  19.                         temp['id'] = id;
  20.                         $(this).children('[edit-enable="true"]').each(function () {
  21.                             var name = $(this).attr('name');
  22.                             var origin = $(this).attr('origin');
  23.                             var newval = $(this).attr('new-val');
  24.                             if(origin != newval){
  25.                                 temp[name] = newval;
  26.                             };
  27.                         })
  28.                         postlist.push(temp);
  29.                         $.ajax({
  30.                             url:requestURL,
  31.                             type:'POST',
  32.                             data:{'post_list':JSON.stringify(postlist)},
  33.                             dataType:'Json',
  34.                             success:function (arg) {
  35.                                 if(arg.status){
  36.                                     init(1);
  37.                                 }else {
  38.                                     alter(arg);
  39.                                 }
  40.                             }
  41.  
  42.                         })
  43.  
  44.                     })
  45.  
  46.                 })
  47.             }
  48.             function bindM() {
  49.                 $('#bindbj').click(function () {
  50.                     var ed = $(this).hasClass('btn-warning');
  51.                     if(ed){
  52.                          $(this).removeClass('btn-warning');
  53.                          $(this).text("进入编辑模式");
  54.                          $('#table_td').find(':checked').each(function () {
  55.                              var $cur = $(this).parent().parent();
  56.                              bjhangout($cur);
  57.                          })
  58.                     }else {
  59.                         $(this).addClass('btn-warning');
  60.                         $(this).text("退出编辑模式");
  61.                         $('#table_td').find(':checked').each(function () {
  62.                              var $cur = $(this).parent().parent();
  63.                              bjhang($cur);
  64.                          })
  65.                     }
  66.                 })
  67.             }
  68.             function bindC() {
  69.                 // {#$('#table_td').find(':checkbox').click()
  70.                 // 这种方式新增数据无法被选中#}
  71.                 $('#table_td').on('click',':checkbox',function () {
  72.                     if($('#bindbj').hasClass('btn-warning')){
  73.                         var ck = $(this).prop('checked');
  74.                         var $cur = $(this).parent().parent();
  75.                         if(ck){
  76.                             // {#console.log("进入编辑模式");#}
  77.                             bjhang($cur)
  78.                         }else{
  79.                             // {#console.log("退出编辑模式");#}
  80.                             bjhangout($cur)
  81.                         }
  82.                     }
  83.                 })
  84.             }
  85.             function bjhang(cur) {
  86.                 cur.attr('has-edit','true');
  87.                 cur.children().each(function () {
  88.                     cur.addClass('success');
  89.                     var editenable = $(this).attr('edit-enable');
  90.                     var editetype = $(this).attr('edit-type');
  91.                     if (editenable === 'true'){
  92.                         if(editetype === 'select'){
  93.                             var globalname = $(this).attr("global-name");
  94.                             var origin = $(this).attr("origin");
  95.                             var sel = document.createElement('select');
  96.                             sel.className = "form-control";
  97.                             $.each(window[globalname],function (k,v) {
  98.                                 var op = document.createElement('option');
  99.                                 op.innerHTML = v[1];
  100.                                 op.setAttribute('value',v[0]);
  101.                                 $(sel).append(op)
  102.                             });
  103.                             $(sel).val(origin);
  104.                             $(this).html(sel);
  105.  
  106.                         }else if(editetype === 'input'){
  107.                             var intext = $(this).text();
  108.                             var tag = document.createElement('input');
  109.                             tag.className = "form-control";
  110.                             tag.value = intext;
  111.                             $(this).html(tag)
  112.                         }
  113.                     }})}
  114.             function bjhangout(cur) {
  115.                 cur.removeClass('success');
  116.                 cur.children().each(function () {
  117.                     var editenable = $(this).attr('edit-enable');
  118.                     if (editenable === 'true'){
  119.                         var editetype = $(this).attr('edit-type');
  120.                         if(editetype === 'select'){
  121.                                 var $select = $(this).children().first() ;
  122.                                 var newid = $select.val();
  123.                                 var newtext = $select[0].selectedOptions[0].innerHTML;
  124.                                 $(this).html(newtext);
  125.                                 $(this).attr('new-val',newid)
  126.  
  127.                         }else if(editetype === 'input'){
  128.                             var $input2 = $(this).children().first() ;
  129.                             var tag2 = $input2.val();
  130.                             $(this).html(tag2);
  131.                              $(this).attr('new-val',tag2)
  132.  
  133.                         }}})}
  134.             function bindall() {
  135.                 $('#bindall').click(function () {
  136.                     $('#table_td').find(':checkbox').each(function () {
  137.                         if($('#bindbj').hasClass('btn-warning')){
  138.                             if($(this).prop('checked')){
  139.  
  140.                             }else {
  141.                                 $(this).prop('checked',true);
  142.                                 var $cur = $(this).parent().parent();
  143.                                 bjhang($cur)
  144.                             }
  145.                         }else {
  146.                             $(this).prop('checked',true);
  147.                         };
  148.                     })
  149.                 })
  150.             }
  151.             function unbindall() {
  152.                   $('#unbindall').click(function () {
  153.                       $('#table_td').find(':checked').each(function () {
  154.                             if($('#bindbj').hasClass('btn-warning')){
  155.                                 $(this).prop('checked',false);
  156.                                 var $cur = $(this).parent().parent();
  157.                                 bjhangout($cur);
  158.                             }else {
  159.                                 $(this).prop('checked',false);
  160.                             }
  161.                       })
  162.                   })
  163.             }
  164.             function bindfx() {
  165.                 $('#bindfx').click(function () {
  166.                       $('#table_td').find(':checkbox').each(function () {
  167.                             if($('#bindbj').hasClass('btn-warning')){
  168.                                 var $cur = $(this).parent().parent();
  169.                                 if ($(this).prop('checked')){
  170.                                     $(this).prop('checked',false);
  171.                                     bjhangout($cur);
  172.                                 }else {
  173.                                     $(this).prop('checked',true);
  174.                                     bjhang($cur);
  175.                                 }
  176.                             }else {
  177.                                 if ($(this).prop('checked')){
  178.                                     $(this).prop('checked',false);
  179.                                 }else {
  180.                                     $(this).prop('checked',true);
  181.                                 }
  182.                             }
  183.                       })
  184.                   })
  185.             }
  186.  
  187.             // {#用ajax get方式获取后台的json数据#}
  188.             function init(pager) {
  189.                 $.ajax(
  190.                     {
  191.                         url:requestURL,
  192.                         data:{'pager':pager},
  193.                         type:'GET',
  194.                         dataType:'JSON',
  195.                         success:function (result) {
  196.                             initchoice(result.choice_dict);
  197.                             initheader(result.table_config);
  198.                             initbody(result.table_config,result.info)
  199.                         }
  200.                     }
  201.                 )
  202.             };
  203.  
  204.             // {#列表表头显示部分#}
  205.             function initheader(table_config) {
  206.                 var tr = document.createElement('tr');
  207.                 $.each(table_config,function (k,item) {
  208.                     var th = document.createElement('th');
  209.                     if (item.display){
  210.                         th.innerHTML = item.title;
  211.                         $(tr).append(th);
  212.                     }
  213.                 });
  214.                 $('#table_th').empty();
  215.                 $('#table_th').append(tr);
  216.             }
  217.  
  218.             // {#列表数据显示部分#}
  219.             function initbody(table_config,info){
  220.                 $('#table_td').empty();
  221.                 $.each(info,function (i,j) {
  222.                     var tr = document.createElement('tr');
  223.                     tr.setAttribute('j-id',j['id']);
  224.                     var dictinfo = {};
  225.                     $.each(table_config,function (x,y) {
  226.                          if (y.display) {
  227.                              $.each(y.text.val,function (k,v) {
  228.                                  if(v.substring(0,2) ==='@@'){
  229.                                     var gname = v.substring(2,v.length);
  230.                                     var gid = j[y.id];
  231.                                     var t = test(gname,gid);
  232.                                     dictinfo[k] =t;
  233.  
  234.                                  }else if (v[0] ==='@'){
  235.                                      dictinfo[k] = j[v.substring(1,v.length)];
  236.                                  }else {
  237.                                      dictinfo[k] = v;}
  238.                              });
  239.                          var td = document.createElement('td');
  240.                          var ss = y.text.key.format(dictinfo);
  241.                          td.innerHTML = ss;
  242.  
  243.                          $.each(y.attrs,function (q,t) {
  244.                              if(t[0] === '@'){
  245.                                  td.setAttribute(q,j[t.substring(1,t.length)]);
  246.                              }else {
  247.                                  td.setAttribute(q,t)
  248.                              }
  249.                          });
  250.  
  251.                          $(tr).append(td);}
  252.                     });
  253.                     $('#table_td').append(tr)})}
  254.  
  255.             // {#choice数据类型，定义全局变量#}
  256.             function initchoice(choice_dict) {
  257.                 $.each(choice_dict,function (i,j) {
  258.                     window[i]=j;
  259.                 })
  260.             }
  261.  
  262.             // {#将以数据id去choice全局变量取对应的 中文显示信息#}
  263.             function test(gname,gid) {
  264.                 var ret = null;
  265.                 $.each(window[gname], function (k, item) {
  266.                     if (item[0] === gid) {
  267.                         ret = item[1];
  268.                         return
  269.                     }
  270.                 });
  271.                 return ret;
  272.             }
  273.  
  274.             jQuery.extend({
  275.                 'NB':function (url) {
  276.                     requestURL = url;
  277.                     init();
  278.                     bindM();
  279.                     bindC();
  280.                     bindall();
  281.                     unbindall();
  282.                     bindfx();
  283.                     bindsave();
  284.                 },
  285.                 'changepager':function (num) {
  286.                     init(num);
  287.                 }
  288.             })
  289. })();

复制代码

　　　views完整代码

复制代码

  1. def ajaxdate(request):
  2.     import json
  3.     if request.method == "GET":
  4.         table_config = [
  5.             {
  6.                 'id': None,
  7.                 'title': '选项',
  8.                 'display': 1,
  9.                 'text': {'key': "<input type='checkbox' />", 'val': {}},
  10.                 'attrs': {},
  11.             },
  12.             {
  13.                 'id':'id',
  14.                 'title':'ID',
  15.                 'display':1,
  16.                 'text':{'key':"{n}",'val':{'n':'@id'}},
  17.                 'attrs':{},
  18.             },
  19.             {
  20.                 'id': 'title',
  21.                 'title': '标题',
  22.                 'display': 1,
  23.                 'text': {'key': "{n}", 'val': {'n': '@title'}},
  24.                 'attrs': {'name':'title',"origin":'@title','edit-enable':'true','edit-type':'input'},
  25.             },
  26.             {
  27.                 'id': 'status',
  28.                 'title': '状态',
  29.                 'display': 1,
  30.                 'text': {'key': "{n}", 'val': {'n': '@@device_type_choice'}},
  31.                 'attrs': {'name':'status',"origin":'@status','edit-enable':'true','edit-type':'select',"global-name":'device_type_choice'},
  32.             },
  33.             {
  34.                 'id': 'pro_id',
  35.                 'title': '处理人',
  36.                 'display': 1,
  37.                 'text': {'key': "{n}", 'val': {'n': '@@device_type_userinfo'}},
  38.                 'attrs': {'name':'pro_id',"origin":'@pro_id','edit-enable':'true','edit-type':'select',"global-name":'device_type_userinfo'},
  39.             },
  40.             {
  41.                 'id': 'sol',
  42.                 'title': '处理详情',
  43.                 'display': 1,
  44.                 'text': {'key': "{n}", 'val': {'n': '@sol'}},
  45.                 'attrs': {'name': 'sol', "origin": '@sol', 'edit-enable': 'true', 'edit-type': 'input'},
  46.             },
  47.             {
  48.                 'id': None,
  49.                 'title': '操作',
  50.                 'display': 1,
  51.                 'text': {'key': "<a href='#'>添加</a>|<a href='#'>删除</a>", 'val': {}},
  52.                 'attrs': {},
  53.             },
  54.         ]
  55.         zd = []
  56.         for i in table_config:
  57.             if i['id']:
  58.                 zd.append(i['id'])
  59.         info = models.Fault.objects.values(*zd).all()
  60.         choice = models.Fault.choice
  61.         userinfo = models.Userinfo.objects.all().values_list('uid','uname')
  62.  
  63.         result = {
  64.             'table_config':table_config,
  65.             'info':list(info),
  66.             'choice_dict':{'device_type_choice':choice,'device_type_userinfo':list(userinfo)},
  67.         }
  68.         return HttpResponse(json.dumps(result))
  69.  
  70.     elif request.method == "POST":
  71.         content = json.loads(request.POST['post_list'])
  72.         if content:
  73.             for i in content:
  74.                 models.Fault.objects.filter(id=i['id']).update_or_create(i)
  75.  
  76.         ret = {'status':'OK'}
  77.         return HttpResponse('OK')

https://www.cnblogs.com/Anec/p/10093410.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/1021129
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号