django与layui的结合尝试2：增删改查 |
您所在的位置：网站首页 › 用layui写异步增删改查 › django与layui的结合尝试2：增删改查 |
|
接上篇： 节点的数据库模型： work_status={ ("1","active"), ("0","inactive") } class Node(models.Model): node_ip=models.GenericIPAddressField(unique=True) work_or_no=models.CharField(max_length=2,choices=work_status) remark=models.CharField(max_length=32,null=True) def __str__(self): return self.node_ip展示 layui有个table.html，我们把它拷贝过来进行修改成nodeList.html， table.html是动态地读取table.json的数据进行渲染，所以要点部分在于js，这里主要是table.render的使用，通过修改cols，我们可以得到对应的列，而通过修改url参数，我们可以到对应的url获取数据，只要数据格式符合table.json即可，主要代码如下： layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ elem: '#currentTableId', toolbar: '#toolbarDemo', url:'getNodeList', method: 'get', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {type: "checkbox", width: 50}, {field: 'id', width: 80, title: 'ID', sort: true}, {field: 'work_or_no', width: 80, title: '开/关',}, {field: 'node_ip', width: 180, title: '节点ip'}, {field: 'remark', width: 180, title: '备注',}, {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} ]], limits: [10, 15, 20, 25, 50, 100], limit: 15, page: true, skin: 'line' });getNodeList的代码处理如下： def getNodeList(request): nodelist={ "code": 0, "msg": "", "count": Node.objects.all().count(), "data": [] } node_obj=list(Node.objects.all().values()) for item in node_obj: if item["work_or_no"]=="1": item["work_or_no"]="开" else: item["work_or_no"] = "关" nodelist["data"]=node_obj return HttpResponse(json.dumps(nodelist))开关的处理是因为默认存储1/0，显示用开/关比较易懂，当然也可以数据设计时就用"开""关",渲染的数据存储在"data"这个key里面，这里的count动态获取了总数，前端会据此生成分页，也可以前端传递要取出的数量进行动态获取 添加 添加相对简单，把数据通过ajax传递给后端，返回后刷新页面，代码如下： table.on('tool(currentTableFilter)', function (obj) { var data = obj.data; if (obj.event === 'add') { // 监听添加操作 var index = layer.open({ title: '添加节点', type: 2, shade: 0.2, maxmin:true, shadeClose: true, area: ['100%', '100%'], content: '/backend/addNode', end:function () { table.reload('currentTableId', {url:'getNodeList'}) } }); $(window).on("resize", function () { layer.full(index); }); }layui通过content参数打开一个页面进行处理添加数据（默认是add.html），然后end函数在执行添加后用table.reload刷新页面，需要注意这里得传递url，表格需要从url取数据 这里的添加页面我通过add.html修改为addNode.html，代码如下： layui body { background-color: #ffffff; } .err{ color: red; } 节点ip 填写节点ip 开关 备注信息 确认保存 layui.use(['form'], function () { var form = layui.form, layer = layui.layer, $ = layui.$; //监听提交 form.on('submit(saveBtn)', function (data) { var index = layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }, function () { // 关闭弹出层 $.ajax({ data:data.field, url:"addNode", type:"POST", dataType:"json", success:function (arg) { if(arg.status == "ok"){ layer.close(index); var iframeIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(iframeIndex); }else { var err=arg.msg for ( x in err) { $("."+x+"_err").text(err[x]) } } } }) {#layer.close(index);#} {##} {#var iframeIndex = parent.layer.getFrameIndex(window.name);#} {#parent.layer.close(iframeIndex);#} }); return false; }); });主要难点在于通过父页面关闭当前页面，重点语句如下： var iframeIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(iframeIndex);服务端的代码如下： def addNode(request): if request.is_ajax(): print(request.POST) ajax_rsp = {"status": "err", "msg": None} NewNode=Nodeform(data=request.POST) if NewNode.is_valid(): print(NewNode.cleaned_data) Node.objects.create(**NewNode.cleaned_data) ajax_rsp["status"]="ok" else: ajax_rsp["msg"] = NewNode.errors print(NewNode.errors) return HttpResponse(json.dumps(ajax_rsp)) ret=render(request,"addNode.html") ret["X-Frame-Options"]="sameorigin" return ret删除 这里的删除有两块，一个全局的删除，一个当前行的删除 1.全局删除用多选框勾选（显示的cols加一列type:checkbox），layui会收取这些行的数据，我们只需要主键数据即可，所以可以在前端做点处理，主要代码如下: if (obj.event === 'delete') { // 监听删除操作 var checkStatus = table.checkStatus('currentTableId') , data = checkStatus.data; {#layer.alert(JSON.stringify(data));#} var Node=new Array(); for (i=0;i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |