layui 框架與BootCSS框架相似都屬於前端美化框架，區別在於BootCSS更加專業，而LayUI則更多的是面向於后端開發者，所以在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又並非受限於 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。
官方示例1： 簡單的頁面前端布局。
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css", media="all">
<script src="https://www.blib.cn/cdn/layui/layui.js"></script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script>
layui.use('table', function(){
var table = layui.table;
//執行一個 table 實例
table.render({
elem: '#demo'
,height: 420
,url: '/host' //數據接口
,title: '用戶表'
,page: true //開啟分頁
,toolbar: 'default' //開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔
,totalRow: true //開啟合計行
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, sort: true}
,{field:'hostname', title:'用戶名', width:120}
,{field:'hostaddr', title:'主機地址',width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]
});
//監聽頭工具欄事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //獲取選中的數據
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
if(data.length === 0){
layer.msg('請選擇一行');
} else if(data.length > 1){
layer.msg('只能同時編輯一個');
} else {
layer.alert('編輯 [id]：'+ checkStatus.data[0].id);
}
break;
case 'delete':
if(data.length === 0){
layer.msg('請選擇一行');
} else {
layer.msg('刪除');
}
break;
};
});
//監聽行工具事件
table.on('tool(test)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
var data = obj.data //獲得當前行數據
,layEvent = obj.event; //獲得 lay-event 對應的值
if(layEvent === 'detail'){
layer.msg('查看操作');
} else if(layEvent === 'del'){
layer.confirm('真的刪除行么', function(index){
obj.del(); //刪除對應行（tr）的DOM結構
layer.close(index);
//向服務端發送刪除指令
});
} else if(layEvent === 'edit'){
layer.msg('編輯操作');
}
});
});
</script>
官方示例2： 實現簡單的表格布局，可以自定義按鈕事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css", media="all">
<script src="https://www.blib.cn/cdn/layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數據</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">獲取選中數目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">驗證是否全選</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/test/table/demo1.json'
,toolbar: '#toolbarDemo' //開啟頭部工具欄，並為其綁定左側模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側圖標。如無需自定義，去除該參數即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用戶數據表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用戶名', width:120, edit: 'text'}
,{field:'email', title:'郵箱', width:150, edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性別', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'簽名'}
,{field:'experience', title:'積分', width:80, sort: true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次數', width:100, sort: true}
,{field:'joinTime', title:'加入時間', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//頭工具欄事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('選中了：'+ data.length + ' 個');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全選': '未全選');
break;
//自定義頭工具欄右側圖標 - 提示
case 'LAYTABLE_TIPS':
layer.alert('這是工具欄右側自定義的一個圖標按鈕');
break;
};
});
//監聽行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的刪除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
});
</script>
</body>
</html>
Django 實現表格分頁： 接着就是實現分頁了，使用layui框架配合Django自帶的分頁組件，即可完成分頁：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="demo"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url:'/get_page',
method:'get',
toolbar: '#toolbarDemo', // 顯示工具條
request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
},
response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, //只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
});
</script>
</body>
</html>
views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
models.py
from django.db import models
class HostDB(models.Model):
id = models.AutoField(primary_key=True)
hostname = models.CharField(max_length=64)
hostaddr = models.CharField(max_length=64)
hostmode = models.CharField(max_length=64)
urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page)
]
給表格添加搜索功能: 接着我們繼續給這個頁面添加新功能，這次就先加上一個重載搜索功能吧.
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/jquery/jquery3.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
搜索名稱：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url:'/get_page',
method:'get',
id: 'testReload'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, //只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
console.log(demoReload);
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
}, 'data');
}
};
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page)
]
給表格添加刪除功能: 繼續完善刪除功能，刪除功能就是獲取當前表格中的表單ID，然后ajax發后端刪除即可。
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/jquery/jquery3.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
id: 'testReload',
url:'/get_page',
method:'get'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, // 只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
// ------------------------------------------------------------------
// 監聽行工具事件：也就是編輯與刪除的處理事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的要刪除本行數據嗎 ?', function(index){
// console.log("待刪除ID: " + obj.data['id']);
$.ajax({
url:"/delete_page/",
type:"get",
data: {"id":obj.data['id']},
success:function (recv) {
layer.msg("刪除完成了..", {icon: 6});
}
});
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
// 搜索后的重載
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
}, 'data');
}
};
// ---------------------------------------------------------
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
views.py
def delete_page(request):
get_id = request.GET.get("id")
models.HostDB.objects.filter(id=get_id).delete()
return render(request,"index.html")
url.py
from MyWeb import views
urlpatterns = [
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page),
path('delete_page/',views.delete_page)
]
給表格增加編輯功能: 增加編輯功能，用戶點擊后可自定義編輯頁面，並同步更新。
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/jquery/jquery3.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
id: 'testReload',
url:'/get_page',
method:'get'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, // 只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
// ------------------------------------------------------------------
// 監聽行工具事件：也就是編輯與刪除的處理事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的要刪除本行數據嗎 ?', {icon: 3,anim: 2}, function(index){
// console.log("待刪除ID: " + obj.data['id']);
$.ajax({
url:"/delete_page/",
type:"get",
data: {"id":obj.data['id']},
success:function (recv) {
layer.msg("刪除完成了..", {icon: 6});
}
});
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({ formType:2, title: "編輯表格",btn:['修改數據','關閉'],anim: 4,
content:`<div>
主機序號: <input type="text" style='display:inline-block' id="id"><br><br>
主機名稱: <input type="text" style='display:inline-block' id="hostname"><br><br>
主機地址: <input type="text" style='display:inline-block' id="hostaddr"><br><br>
主機屬組: <input type="text" style='display:inline-block' id="hostmode"><br><br>
</div>`,
yes:function (index,layero)
{
console.log("點擊yes觸發事件:" + index);
var id = $("#id").val();
var hostname = $("#hostname").val();
var hostaddr = $("#hostaddr").val();
var hostmode = $("#hostmode").val();
$.ajax({
url: "/update_page",
type: "get",
data: {"id": id,
"hostname": hostname,
"hostaddr": hostaddr,
"hostmode": hostmode },
success:function (recv) {
// 修改完成后,本地直接更新數據,這樣就無需刷新一次了
obj.update({
hostname: hostname,
hostaddr: hostaddr,
hostmode: hostmode
});
layer.msg("修改完成了..", {icon: 6});
layer.close(index);
}
});
}
});
$("#id").val(data.id);
$("#hostname").val(data.hostname);
$("#hostaddr").val(data.hostaddr);
$("#hostmode").val(data.hostmode);
}
});
// 搜索后的重載,也就是找到數據以后直接更新
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
});
}
};
// ---------------------------------------------------------
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
def delete_page(request):
get_id = request.GET.get("id")
models.HostDB.objects.filter(id=get_id).delete()
return render(request,"index.html")
def update_page(request):
get_id = request.GET.get("id")
get_hostname = request.GET.get("hostname")
get_hostaddr = request.GET.get("hostaddr")
get_hostmode = request.GET.get("hostmode")
print(get_hostmode)
obj = models.HostDB.objects.get(id=get_id)
obj.hostname = get_hostname
obj.hostaddr = get_hostaddr
obj.hostmode = get_hostmode
obj.save()
return render(request,"index.html")
urls.py
from MyWeb import views
urlpatterns = [
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page),
path('delete_page/',views.delete_page),
path("update_page/",views.update_page)
]
如下是全部完整代碼。
利用layui框架實現分頁: layui是一個完整的前端開發框架,利用它可以快速構建分頁應用,比BootStrap更加靈活.
# models.py
from django.db import models
class HostDB(models.Model):
id = models.AutoField(primary_key=True)
hostname = models.CharField(max_length=64)
hostaddr = models.CharField(max_length=64)
hostmode = models.CharField(max_length=64)
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://lyshark.com/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://lyshark.com/cdn/layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="demo"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url:'/get_page',
method:'get',
toolbar: '#toolbarDemo' // 顯示工具條
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, //只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
});
</script>
</body>
</html>
# views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
# 將數據組裝成字典后放入data_list列表
data_list,ref_data = [],[]
for item in data:
dict = { 'id':item.id , 'hostname':item.hostname, 'hostaddr':item.hostaddr, 'hostmode':item.hostmode }
data_list.append(dict)
# 使用分頁器分頁
pageInator = Paginator(data_list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
ref_data.append(item)
# 返回分頁格式
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": ref_data }
return HttpResponse(json.dumps(data))
# name: url.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page)
]
layui實現完整表格分頁: 通過使用layui框架完成的一個相對完整的表格分頁,可用於生產環境.
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://lyshark.com/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://lyshark.com/cdn/jquery/jquery3.js"></script>
<script type="text/javascript" src="https://lyshark.com/cdn/layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
id: 'testReload',
url:'/get_page',
method:'get'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, // 只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
// ------------------------------------------------------------------
// 監聽行工具事件：也就是編輯與刪除的處理事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的要刪除本行數據嗎 ?', {icon: 3,anim: 2}, function(index){
// console.log("待刪除ID: " + obj.data['id']);
$.ajax({
url:"/delete_page/",
type:"get",
data: {"id":obj.data['id']},
success:function (recv) {
layer.msg("刪除完成了..", {icon: 6});
}
});
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({ formType:2, title: "編輯表格",btn:['修改數據','關閉'],anim: 4,
content:`<div>
主機序號: <input type="text" style='display:inline-block' id="id"><br><br>
主機名稱: <input type="text" style='display:inline-block' id="hostname"><br><br>
主機地址: <input type="text" style='display:inline-block' id="hostaddr"><br><br>
主機屬組: <input type="text" style='display:inline-block' id="hostmode"><br><br>
</div>`,
yes:function (index,layero)
{
console.log("點擊yes觸發事件:" + index);
var id = $("#id").val();
var hostname = $("#hostname").val();
var hostaddr = $("#hostaddr").val();
var hostmode = $("#hostmode").val();
$.ajax({
url: "/update_page",
type: "get",
data: {"id": id,
"hostname": hostname,
"hostaddr": hostaddr,
"hostmode": hostmode },
success:function (recv) {
// 修改完成后,本地直接更新數據,這樣就無需刷新一次了
obj.update({
hostname: hostname,
hostaddr: hostaddr,
hostmode: hostmode
});
layer.msg("修改完成了..", {icon: 6});
layer.close(index);
}
});
}
});
$("#id").val(data.id);
$("#hostname").val(data.hostname);
$("#hostaddr").val(data.hostaddr);
$("#hostmode").val(data.hostmode);
}
});
// 搜索后的重載,也就是找到數據以后直接更新
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
});
}
};
// ---------------------------------------------------------
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
# name:views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
def delete_page(request):
get_id = request.GET.get("id")
models.HostDB.objects.filter(id=get_id).delete()
return render(request,"index.html")
def update_page(request):
get_id = request.GET.get("id")
get_hostname = request.GET.get("hostname")
get_hostaddr = request.GET.get("hostaddr")
get_hostmode = request.GET.get("hostmode")
print(get_hostmode)
obj = models.HostDB.objects.get(id=get_id)
obj.hostname = get_hostname
obj.hostaddr = get_hostaddr
obj.hostmode = get_hostmode
obj.save()
return render(request,"index.html")
# name: urls.py
from MyWeb import views
urlpatterns = [
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page),
path('delete_page/',views.delete_page),
path("update_page/",views.update_page)
]
代碼總結
實現簡單表格分頁: layui 是一個完整的前端開發框架,利用它可以快速構建分頁應用,比BootStrap更加靈活.
首先我們創建一個models.py 規划好我們的表結構,並插入一些測試數據.
# models.py
from django.db import models
class HostDB(models.Model):
id = models.AutoField(primary_key=True)
hostname = models.CharField(max_length=64)
hostaddr = models.CharField(max_length=64)
hostmode = models.CharField(max_length=64)
插入完成數據后,我們接着創建前端頁面並引用LayUi框架.
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="demo"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url:'/get_page',
method:'get',
toolbar: '#toolbarDemo' // 顯示工具條
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, //只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
});
</script>
</body>
</html>
接着創建view.py視圖文件,並在后台做好分頁處理.
# views.py
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
# 將數據組裝成字典后放入data_list列表
data_list,ref_data = [],[]
for item in data:
dict = { 'id':item.id , 'hostname':item.hostname, 'hostaddr':item.hostaddr, 'hostmode':item.hostmode }
data_list.append(dict)
# 使用分頁器分頁
pageInator = Paginator(data_list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
ref_data.append(item)
# 返回分頁格式
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": ref_data }
return HttpResponse(json.dumps(data))
最后增加路由映射記錄,記錄值如下所示.
# name: url.py
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page)
]
給表格添加搜索功能: 接着我們繼續給這個頁面添加新功能，這次就先加上一個重載搜索功能吧,前端代碼只需要稍微修改一下.
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="demoTable">
搜索名稱：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url:'/get_page',
method:'get',
id: 'testReload'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, //只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
console.log(demoReload);
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
}, 'data');
}
};
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
然后修改視圖層views.py增加搜索方法的實現過程.
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
路由層也需要增加搜索接口.
# name: url.py
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page)
]
添加刪除功能: 繼續完善刪除功能，刪除功能就是獲取當前表格中的表單ID，然后ajax發后端刪除即可。
先來把前端代碼改一下.
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="demoTable">
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
id: 'testReload',
url:'/get_page',
method:'get'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, // 只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
// ------------------------------------------------------------------
// 監聽行工具事件：也就是編輯與刪除的處理事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的要刪除本行數據嗎 ?', function(index){
// console.log("待刪除ID: " + obj.data['id']);
$.ajax({
url:"/delete_page/",
type:"get",
data: {"id":obj.data['id']},
success:function (recv) {
layer.msg("刪除完成了..", {icon: 6});
}
});
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
// 搜索后的重載
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
}, 'data');
}
};
// ---------------------------------------------------------
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
接着修改視圖層,增加刪除方法的具體實現細節.
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
def delete_page(request):
get_id = request.GET.get("id")
models.HostDB.objects.filter(id=get_id).delete()
return render(request,"index.html")
路由層增加刪除視圖.
# name: url.py
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page),
path('delete_page/',views.delete_page)
]
增加編輯功能: 增加編輯功能，用戶點擊后可自定義編輯頁面，並同步更新，先修改前端代碼。
<!--name: index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="demoTable">
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
id: 'testReload',
url:'/get_page',
method:'get'
,request: {
pageName: 'pageIndex', // 頁碼的參數名稱，默認：page
limitName: 'pageSize' // 每頁數據量的參數名，默認：limit
}
,response: {
statusName: 'code', // 規定數據狀態的字段名稱，默認：code
statusCode: 0, // 規定成功的狀態碼，默認：0
msgName: 'msg', // 規定狀態信息的字段名稱，默認：msg
countName: 'DataCount', // 規定數據總數的字段名稱，默認：count
dataName: 'data' // 規定數據列表的字段名稱，默認：data
}
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主機ID', width:100, sort: true},
{field:'hostname', title:'主機名稱', width:120},
{field:'hostaddr', title:'主機地址', width:120},
{field:'hostmode', title:'主機組', width:120},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
]]
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定義分頁布局
curr: 1, // 設置默認起始頁1
groups: 10, // 只顯示10個連續頁碼,就是說顯示10個可見頁其他的省略
first: false, // 不顯示首頁
last: false // 不顯示尾頁
},
limit: 5,
limits: [5,10,15,20,25]
});
// ------------------------------------------------------------------
// 監聽行工具事件：也就是編輯與刪除的處理事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的要刪除本行數據嗎 ?', {icon: 3,anim: 2}, function(index){
// console.log("待刪除ID: " + obj.data['id']);
$.ajax({
url:"/delete_page/",
type:"get",
data: {"id":obj.data['id']},
success:function (recv) {
layer.msg("刪除完成了..", {icon: 6});
}
});
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({ formType:2, title: "編輯表格",btn:['修改數據','關閉'],anim: 4,
content:`<div>
主機序號: <input type="text" style='display:inline-block' id="id"><br><br>
主機名稱: <input type="text" style='display:inline-block' id="hostname"><br><br>
主機地址: <input type="text" style='display:inline-block' id="hostaddr"><br><br>
主機屬組: <input type="text" style='display:inline-block' id="hostmode"><br><br>
</div>`,
yes:function (index,layero)
{
console.log("點擊yes觸發事件:" + index);
var id = $("#id").val();
var hostname = $("#hostname").val();
var hostaddr = $("#hostaddr").val();
var hostmode = $("#hostmode").val();
$.ajax({
url: "/update_page",
type: "get",
data: {"id": id,
"hostname": hostname,
"hostaddr": hostaddr,
"hostmode": hostmode },
success:function (recv) {
// 修改完成后,本地直接更新數據,這樣就無需刷新一次了
obj.update({
hostname: hostname,
hostaddr: hostaddr,
hostmode: hostmode
});
layer.msg("修改完成了..", {icon: 6});
layer.close(index);
}
});
}
});
$("#id").val(data.id);
$("#hostname").val(data.hostname);
$("#hostaddr").val(data.hostaddr);
$("#hostmode").val(data.hostmode);
}
});
// 搜索后的重載,也就是找到數據以后直接更新
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('testReload', {
url:"/search_page",
page: {
curr: 1,
limits: [1]
}
,where: {
hostname: demoReload.val()
}
});
}
};
// ---------------------------------------------------------
// 綁定搜索事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
接着修改視圖層，此處只需要增加一個 update_page 函數來實現修改即可。
from django.shortcuts import render,HttpResponse
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from MyWeb import models
import json
def index(request):
return render(request,"index.html")
def get_page(request):
data = models.HostDB.objects.all()
dataCount = data.count()
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
print("當前索引:{} 當前大小:{}".format(pageIndex,pageSize))
print("所有記錄:{} 數據總條數:{}".format(data,dataCount))
list = []
res = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
pageInator = Paginator(list,pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
data = { "code": 0,"msg": "ok","DataCount": dataCount,"data": res }
return HttpResponse(json.dumps(data))
def search_page(request):
sql = request.GET.get("hostname")
data = models.HostDB.objects.all().filter(hostname=sql)
list = []
for item in data:
dict = {}
dict['id'] = item.id
dict['hostname'] = item.hostname
dict['hostaddr'] = item.hostaddr
dict['hostmode'] = item.hostmode
list.append(dict)
data = { "code": 0,"msg": "ok","DataCount": 1,"data": list }
return HttpResponse(json.dumps(data))
def delete_page(request):
get_id = request.GET.get("id")
models.HostDB.objects.filter(id=get_id).delete()
return render(request,"index.html")
def update_page(request):
get_id = request.GET.get("id")
get_hostname = request.GET.get("hostname")
get_hostaddr = request.GET.get("hostaddr")
get_hostmode = request.GET.get("hostmode")
print(get_hostmode)
obj = models.HostDB.objects.get(id=get_id)
obj.hostname = get_hostname
obj.hostaddr = get_hostaddr
obj.hostmode = get_hostmode
obj.save()
return render(request,"index.html")
路由層增加修改接口，方便調用。
# name: url.py
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('get_page/',views.get_page),
path('search_page/',views.search_page),
path('delete_page/',views.delete_page),
path("update_page/",views.update_page)
]
