Django中如何完成easyUI 表格数据的增删改？
来源：互联网 发布：3dmax软件下载 编辑：程序博客网 时间：2024/05/19 17:49
摘要：Django是Python中很流行的web框架，本文介绍django 中如何利用easyUI实现数据表格的增删改
系统界面： 
1. 创建django应用（省略）
2. django与MySQL联接
2.1设置数据库
在setting中设置数据库连接
我用的MySQL
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':'mydjango', 'USER':'root', 'PASSWORD': 'xxxxx', 'HOST':'127.0.0.1', 'PORT':'3306', }}再在项目的根目录中的
import pymysqlpymysql.install_as_MySQLdb()2.2创建数据表
在models中
class News(models.Model): title = models.CharField(max_length=100) date = models.CharField(max_length=20) detail_time = models.CharField(max_length=20) content = models.TextField() url = models.URLField() source = models.CharField(max_length=50) web = models.CharField(max_length=50) logtime = models.CharField(max_length=30)cmd中完成数据表格创建
#第一步python manage.py makemigrations [appname] #第二步python manage.py migrate [appname]3. 主要应用代码
3.1 前端页面代码 info.html
注：请忽略截图中的地图，这部分代码没有在html中，但不影响应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在线灾情监测</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><!--各种样式--> <style> .my-map{float:left; width: 50%; height: 600px;} .amap-container{height: 100%;} .text_title{margin: auto auto 10px 0; background: #2fa8ec; text-align:center} </style></head><body > <h1 class="text_title">互联网新闻</h1><div class=" my-map"> <table id="dg" title="新闻列表" class="easyui-datagrid" style="width:100%;height:600px;" url="/read/" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="news_title" width="50">新闻标题</th> <th field="news_date" width="50">日期</th> <th field="news_detail_time" width="50">时间</th> <th field="news_content" width="50">新闻内容</th> <th field="news_url" width="50">url地址</th> <th field="news_source" width="50">发布者</th> <th field="news_web" width="50">来源网站</th> <th field="news_logtime" width="50">获取时间</th> </tr> </thead> </table></div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newNews()">新增新闻</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editNews()">编辑新闻</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyNews()">移除新闻</a> </div> <div id="dlg" class="easyui-dialog" style="width:400px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px"> <div style="margin-bottom:20px;font-size:20px;border-bottom:1px solid #ccc">新闻详情</div> <div style="margin-bottom:10px"> <input name="news_title" class="easyui-textbox" required="true" label="新闻标题:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_date" class="easyui-textbox" required="true" label="日期:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_detail_time" class="easyui-textbox" required="true" label="时间:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_content" class="easyui-textbox" required="true" label="新闻内容:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_url" class="easyui-textbox" required="true" label="url地址:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_source" class="easyui-textbox" required="true" label="发布者:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_web" class="easyui-textbox" required="true" label="来源网站:" style="width:100%"> </div> <div style="margin-bottom:10px"> <input name="news_logtime" class="easyui-textbox" required="true" label="获取时间:" style="width:100%"> </div> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveNews()" style="width:90px ">保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px" >取消</a> </div> <!--引入表格--> <!--<script src="../static/js/table.js"></script>--> <script type="text/javascript"> var url; //显示编辑框 function newNews(){ $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增新闻'); $('#fm').form('clear'); url = '/start/'; } //编辑新闻 function editNews(){ var row = $('#dg').datagrid('getSelected'); console.log(row); if (row){ $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit News'); $('#fm').form('load',row); // ajax 编辑News 并且 通过ajax 保存到后端 SQL url = '/edit/'+row.news_id; } } // 保存新闻 function saveNews(){ $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ if (result=="save"){ $('#dlg').dialog('close'); $('#dg').datagrid('reload'); }else if (result.errorMsg){ $.messager.show({ title: 'Error', msg: result.errorMsg }); } else { $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the News data } } }); } //删除新闻 function destroyNews(){ var row = $('#dg').datagrid('getSelected'); console.log(row); if (row){ $.messager.confirm('再次确认','你确定要删除这条新闻？',function(r){ if (r){ $.ajax({ url: '/remove/', type: 'POST', data: {'id':row.news_id}, success: function(data) { if (data=="REMOVE"){ $('#dg').datagrid('reload'); } }, error: function(data) {alert("error")} }); } }); } }</body></html>3.2 后台url.py中代码
from django.conf.urls import urlfrom django.contrib import adminfrom blog import viewsurlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), url(r'^start/', views.app_start), url(r'^read/', views.Read_all_SQL), url(r'^edit/(?P<id>\d+)', views.Edit_NewsName), url(r'^remove/', views.Remove_News_ID),]3.3 后台views.py代码
from django.shortcuts import render, HttpResponse, HttpResponseRedirectfrom blog import modelsimport jsonimport importlib, sysimportlib.reload(sys)# Create your views here.# indexl &def index(request): return HttpResponseRedirect("http://127.0.0.1:8000/start/")# 查询数据库中的数据，并构造成jsondef Read_all_SQL(request): # 查询数据 obj_all = models.News.objects.all() eaList = [] for li in obj_all: eaList.append({ "news_title": li.title, "news_date": li.date, "news_detail_time": li.detail_time, "news_content": li.content, "news_url": li.url, "news_source": li.source, "news_web": li.web, "news_logtime": li.logtime, "news_id": li.id}) # 将int类型使用dumps()方法转为str类型 eaList_len = json.dumps(len(eaList)) # 构造一个字典 json_data_list = {'rows': eaList, 'total': eaList_len} # dumps()将字典转变为json形式, easyList = json.dumps(json_data_list) # 将json返回去，json的键值对中的键需要与前台的表格field=“X”中的X名称保持一致） return HttpResponse(easyList)# 编辑数据并post方法提交到数据库def Edit_NewsName(request, id): print("这是编辑的："+id) print(request.method) # 从前端获取到输入的数据 # POST.get('xxx')这个中的字段是前端表格的<th field="news_title" width="50">新闻标题</th>中的field一致 if request.method == 'POST': title = request.POST.get('news_title') date = request.POST.get('news_date') detail_time = request.POST.get('news_detail_time') content = request.POST.get('news_content') url = request.POST.get('news_url') source = request.POST.get('news_source') web = request.POST.get('news_web') logtime = request.POST.get('news_logtime') # 构造字典并转成json，这里的键需要与数据库的字段一致 dic = { "title": title, "date": date, "detail_time": detail_time, "content": content, "url": url, "source": source, "web": web, "logtime": logtime, }; print(dic) models.News.objects.filter(id=id).update(**dic) return HttpResponse("Edit_OK")# 增加数据与start_appdef app_start(request): # add_save_News if request.method == "POST": print("POST") print(request.POST) title = request.POST.get('news_title') date = request.POST.get('news_date') detail_time = request.POST.get('news_detail_time') content = request.POST.get('news_content') url = request.POST.get('news_url') source = request.POST.get('news_source') web = request.POST.get('news_web') logtime = request.POST.get('news_logtime') # 构造字典并转成json，这里的键需要与数据库的字段一致 dic = { "title": title, "date": date, "detail_time": detail_time, "content": content, "url": url, "source": source, "web": web, "logtime": logtime, }; models.News.objects.create(**dic) return HttpResponse("save") else: print(" is null_!") return render(request, 'info.html')# 移除数据def Remove_News_ID(request): if request.method == "POST": print("REMOVE POST") id = request.POST.get('id') print(id) models.News.objects.filter(id=id).delete() return HttpResponse("REMOVE")注意：ajax在交互数据时候涉及到CSRF安全防护的问题，可以在setting.py中禁用相关的模块 # ‘django.middleware.csrf.CsrfViewMiddleware’,
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',]参考资料：http://www.cnblogs.com/python-diy/p/7056754.html
阅读全文
0 0
- Django中如何完成easyUI 表格数据的增删改？
- jquery 完成数据的增删改，动态操作表格数据。
- jfinal结合easyui完成基本的增删改查操作
- angularjs表格的增删改查完成功能
- js实现表格的增删改，并获取表格中的数据传递到后台中。
- 表格的增删改
- 使用 EasyUI 实现 MySQL 数据 简单的 增删改查
- EASYUI的增删改查
- 使用java原生jdbc完成数据的增删改查
- Spring JdbcTemplate完成数据的增删改查
- Spring NamedParameterJdbcTemplate完成数据的增删改查
- Spring NamedParameterJdbcTemplate完成数据的增删改查
- django的增删改查
- JavaScript对数据表格的增删改查操作详解
- 对表格的增删改
- JS中JSON数据的增删改
- vs信息系统中完成增删改查的操作
- Asp 结合JQuery EasyUI 框架完成的一个增删改查
- Dubbo与Zookeeper、spring框架入门整合。
- [BZOJ]2004: [Hnoi2010]Bus 公交线路 状态压缩DP+矩阵乘法
- 《orange's：一个操作系统的实现》学习过程中问题的解决（持续更新）
- listview侧滑删除
- iOS关于图片问题的警告
- Django中如何完成easyUI 表格数据的增删改？
- Nutch 2.2.1+MySQL+Solr4.2实现网站内容的抓取和索引
- 【Hibernate】对象的状态
- HDU 1358 Peroid(KMP和循环节)
- 学习阶段总结（1）
- 通过java客户端给K8s节点机打标签
- 通过getIdentifier获取资源id
- JSONObject,JSONArray,Map,String之间转换
- 关于redis启动时报错：Could not get a resource from the pool。
