CMDB (后台管理) CURD 插件
查
a. 基本实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
initial();
}); function initial(){
$.ajax({
url: '/backend/curd_json.html',
type: 'GET',
dataType:'JSON',
success:function(arg){ initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
} function initTableHeader(tableConfig){ $.each(tableConfig,function(k,v){
// table_config = [
// {'q':'id','title':'ID'},
// {'q':'hostname','title':'主机名'}
// ] var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
})
} function initTableBody(serverList,tableConfig){
// serverList = [
// {'hostname': 'c2.com', 'asset__cabinet_num': 'B12', 'id': 1, },
// {'hostname': 'c2.com', 'asset__cabinet_num': 'B12', 'id': 1, }
// ]
$.each(serverList,function(k,row){
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){ var td = document.createElement('td');
td.innerHTML = row[rrow.q];
$(tr).append(td);
});
$('#tbBody').append(tr); })
}
</script>
</body>
</html>
curd.html
import json
from django.shortcuts import render,HttpResponse
from repository import models
# Create your views here. def curd(request): return render(request,'curd.html') def curd_json(request):
table_config = [
{'q':'id','title':'ID'},
{'q':'hostname','title':'主机名'},
{'q':'create_at','title':'创建时间'},
{'q':'asset__cabinet_num','title':'机柜号'},
{'q':'asset__business_unit__name','title':'业务线名称'},
] values_list = []
for row in table_config:
values_list.append(row['q']) from datetime import datetime
from datetime import date
class JsonCustomEncoder(json.JSONEncoder): def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value)
server_list = models.Server.objects.values(*values_list) ret = {
'server_list':list(server_list),
'table_config':table_config
} return HttpResponse(json.dumps(ret,cls=JsonCustomEncoder))
views.py
b. 增加操作(删除编辑的url不能实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
initial();
}); function initial(){
$.ajax({
url: '/backend/curd_json.html',
type: 'GET',
dataType:'JSON',
success:function(arg){ initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
} function initTableHeader(tableConfig){ $.each(tableConfig,function(k,v){ var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
})
} function initTableBody(serverList,tableConfig){ $.each(serverList,function(k,row){
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){ var td = document.createElement('td');
if(rrow["q"]){
td.innerHTML = row[rrow.q];
}else{
td.innerHTML = rrow.text;
} $(tr).append(td);
});
$('#tbBody').append(tr); })
}
</script>
</body>
</html>
curd.html
import json
from django.shortcuts import render, HttpResponse
from repository import models # Create your views here. def curd(request):
return render(request, 'curd.html') def curd_json(request):
table_config = [
{
'q': 'id',
'title': 'ID',
"text":{
"tpl":"",
"kwargs":{}
}
},
{'q': 'hostname', 'title': '主机名',"text":""},
{'q': 'create_at', 'title': '创建时间',"text":""},
{'q': 'asset__cabinet_num', 'title': '机柜号',"text":""},
{'q': 'asset__business_unit__name', 'title': '业务线名称',"text":""},
{'q': None,"title":"操作","text":"<a>删除</a>|<a>编辑</a>"}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) from datetime import datetime
from datetime import date
class JsonCustomEncoder(json.JSONEncoder): def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value) server_list = models.Server.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
views.py
c. 定制列的内容字符串格式化(实现删除编辑的url)
import json
from django.shortcuts import render, HttpResponse
from repository import models # Create your views here. def curd(request):
return render(request, 'curd.html') def curd_json(request):
table_config = [
{
'q': 'id',
'title': 'ID',
"text":{
"tpl":"{nid}",
"kwargs":{"nid":"@id"}
}
},
{
'q': 'hostname',
'title': '主机名',
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@hostname"}
}
},
{
'q': 'create_at',
'title': '创建时间',
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@create_at"}
}
},
{
'q': 'asset__business_unit__name',
'title': '业务线名称',
"text": {
"tpl": "aaa-{n1}",
"kwargs": {"n1": "@asset__business_unit__name"}
}
},
{
'q': None,
"title":"操作",
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
}
}
] #"<a>删除</a>|<a>编辑</a>"
values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) from datetime import datetime
from datetime import date
class JsonCustomEncoder(json.JSONEncoder): def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value) server_list = models.Server.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
views.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
initial();
}); String.prototype.format=function (arg) {
var temp = this.replace(/\{(\w+)\}/g,function (k,kk) {
return arg[kk];
});
return temp;
}; function initial(){
$.ajax({
url: '/backend/curd_json.html',
type: 'GET',
dataType:'JSON',
success:function(arg){ initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
} function initTableHeader(tableConfig){ $.each(tableConfig,function(k,v){ var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
})
} function initTableBody(serverList,tableConfig){ $.each(serverList,function(k,row){
// [
// {'id': 1, 'asset__business_unit__name': '咨询部',}
// ]
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){ var td = document.createElement('td'); var newKwargs ={};
$.each(rrow.text.kwargs,function (kkk,vvv) {
var av = vvv;
if(vvv[0] == "@"){
var av = row[vvv.substring(1,vvv.length)];
}
newKwargs[kkk] = av
}); var newText = rrow.text.tpl.format(newKwargs);
td.innerHTML = newText;
$(tr).append(td);
});
$('#tbBody').append(tr); })
}
</script>
</body>
</html>
curd.html
d. 后段查找,前端 id 不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
initial();
}); String.prototype.format=function (arg) {
var temp = this.replace(/\{(\w+)\}/g,function (k,kk) {
return arg[kk];
});
return temp;
}; function initial(){
$.ajax({
url: '/backend/curd_json.html',
type: 'GET',
dataType:'JSON',
success:function(arg){ initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
} function initTableHeader(tableConfig){ $.each(tableConfig,function(k,v){
if(v.display){
var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
}
})
} function initTableBody(serverList,tableConfig){ $.each(serverList,function(k,row){
// [
// {'id': 1, 'asset__business_unit__name': '咨询部',}
// ]
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){
if(rrow.display) {
var td = document.createElement('td');
var newKwargs = {};
$.each(rrow.text.kwargs, function (kkk, vvv) {
var av = vvv;
if (vvv[0] == "@") {
var av = row[vvv.substring(1, vvv.length)];
}
newKwargs[kkk] = av
});
var newText = rrow.text.tpl.format(newKwargs);
td.innerHTML = newText;
$(tr).append(td);
}
});
$('#tbBody').append(tr); })
}
</script>
</body>
</html>
curd.html
import json
from django.shortcuts import render, HttpResponse
from repository import models # Create your views here. def curd(request):
return render(request, 'curd.html') def curd_json(request):
table_config = [
{
'q': 'id',
'title': 'ID',
'display':False,
"text":{
"tpl":"{nid}",
"kwargs":{"nid":"@id"}
}
},
{
'q': 'hostname',
'title': '主机名',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@hostname"}
}
},
{
'q': 'asset__business_unit__id',
'title': '业务线ID',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@asset__business_unit__id"}
}
},
{
'q': 'asset__business_unit__name',
'title': '业务线名称',
'display': True,
"text": {
"tpl": "aaa-{n1}",
"kwargs": {"n1": "@asset__business_unit__name"}
}
},
{
'q': None,
"title":"操作",
'display': True,
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
}
}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) from datetime import datetime
from datetime import date
class JsonCustomEncoder(json.JSONEncoder): def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value) server_list = models.Server.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
views.py
e. 设置插件(复选框显示名称实现),设置属性
(function (jq) {
var GLOBAL_DICT = {}
String.prototype.format=function (arg) {
var temp = this.replace(/\{(\w+)\}/g,function (k,kk) {
return arg[kk];
});
return temp;
};
function initial(url){
$.ajax({
url: url,
type: 'GET',
dataType:'JSON',
success:function(arg){
$.each(arg.global_dict,function (k,v) {
GLOBAL_DICT[k] = v
});
initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
}
function initTableHeader(tableConfig){
$.each(tableConfig,function(k,v){
if(v.display){
var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
}
})
}
function initTableBody(serverList,tableConfig){
$.each(serverList,function(k,row){
// [
// {'id': 1, 'asset__business_unit__name': '咨询部',}
// ]
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){
if(rrow.display) {
var td = document.createElement('td');
//td 中添加内容
var newKwargs = {};
$.each(rrow.text.kwargs, function (kkk, vvv) {
var av = vvv;
if (vvv.substring(0,2) == "@@"){
var global_dict_key = vvv.substring(2,vvv.length);
var nid = row[rrow.q];
console.log(GLOBAL_DICT[global_dict_key]);
$.each(GLOBAL_DICT[global_dict_key],function (gk,gv) {
if(gv[0] == nid){
av = gv[1];
}
})
}
else if (vvv[0] == "@") {
var av = row[vvv.substring(1, vvv.length)];
}
newKwargs[kkk] = av
});
var newText = rrow.text.tpl.format(newKwargs);
td.innerHTML = newText;
//td 中添加属性
$.each(rrow.attrs,function (atkey,atval) {
if (atval[0] == "@") {
td.setAttribute(atkey,row[atval.substring(1, atval.length)]);
}else {
td.setAttribute(atkey,atval)
}
});
$(tr).append(td);
}
});
$('#tbBody').append(tr);
})
}
jq.extend({
xx:function (url) {
initial(url)
}
})
})(jQuery);
static/nb-list.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<h4>服务器列表</h4>
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script src="/static/nb-list.js"></script>
<script> $.xx('/backend/curd_json.html') </script>
</body>
</html>
curd.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<h4>资产列表</h4>
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script src="/static/nb-list.js"></script>
<script> $.xx('/backend/asset_json.html') </script>
</body>
</html>
asset.html
import json
from django.shortcuts import render, HttpResponse
from repository import models from datetime import datetime
from datetime import date class JsonCustomEncoder(json.JSONEncoder):
def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value) def curd(request):
return render(request, 'curd.html') def curd_json(request):
table_config = [
{
'q': 'id',
'title': 'ID',
'display':False,
"text":{
"tpl":"{nid}",
"kwargs":{"nid":"@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'hostname',
'title': '主机名',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@hostname"}
},
'attrs': {'k1':'v1','k2': '@hostname'}
},
{
'q': 'asset__business_unit__id',
'title': '业务线ID',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@asset__business_unit__id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'asset__business_unit__name',
'title': '业务线名称',
'display': True,
"text": {
"tpl": "aaa-{n1}",
"kwargs": {"n1": "@asset__business_unit__name"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': None,
"title":"操作",
'display': True,
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) server_list = models.Server.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder)) def asset(request):
return render(request, 'asset.html') def asset_json(request):
table_config = [
{
'q': 'id',
'title': 'ID',
'display': False,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'device_type_id',
'title': '资产类型',
'display': True,
'text': {
"tpl": "{n1}",
"kwargs": {"n1": "@@device_type_choices"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'device_status_id',
'title': '资产状态',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@@device_status_choices"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'cabinet_num',
'title': '机柜号',
'display': True,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@cabinet_num"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'idc__name',
'title': '机房',
'display': True,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@idc__name"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': None,
"title": "操作",
'display': True,
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) server_list = models.Asset.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config,
'global_dict':{
'device_type_choices':models.Asset.device_type_choices,
'device_status_choices':models.Asset.device_status_choices
}
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
view.py
增删改
a. 行编辑(只是前端实现且复选框没有实现)
1. 行进入编辑模式
- 内容 --> input标签
import json
from django.shortcuts import render, HttpResponse
from repository import models from datetime import datetime
from datetime import date class JsonCustomEncoder(json.JSONEncoder):
def default(self, value):
if isinstance(value, datetime):
return value.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(value, date):
return value.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self, value) def curd(request):
return render(request, 'curd.html') def curd_json(request):
table_config = [
{
'q': None, # 数据库查询字段
'title': '选择', # 显示标题
'display': True, # 是否显示
"text": {
"tpl": "<input type='checkbox' value={n1} />",
"kwargs": {"n1": "@id"}
},
'attrs': {'nid': '@id'}
},
{
'q': 'id',
'title': 'ID',
'display':False,
"text":{
"tpl":"{nid}",
"kwargs":{"nid":"@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'hostname',
'title': '主机名',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@hostname"}
},
'attrs': {'edit-enable':"true",'k2': '@hostname'}
},
{
'q': 'asset__business_unit__id',
'title': '业务线ID',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@asset__business_unit__id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'asset__business_unit__name',
'title': '业务线名称',
'display': True,
"text": {
"tpl": "aaa-{n1}",
"kwargs": {"n1": "@asset__business_unit__name"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': None,
"title":"操作",
'display': True,
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) server_list = models.Server.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder)) def asset(request):
return render(request, 'asset.html') def asset_json(request):
table_config = [
{
'q': None, # 数据库查询字段
'title': '选择', # 显示标题
'display': True, # 是否显示
"text": {
"tpl": "<input type='checkbox' value={n1} />",
"kwargs": {"n1": "@id"}
},
'attrs': {'nid': '@id'}
},
{
'q': 'id',
'title': 'ID',
'display': False,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'device_type_id',
'title': '资产类型',
'display': True,
'text': {
"tpl": "{n1}",
"kwargs": {"n1": "@@device_type_choices"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'device_status_id',
'title': '资产状态',
'display': True,
"text": {
"tpl": "{n1}",
"kwargs": {"n1": "@@device_status_choices"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
},
{
'q': 'cabinet_num',
'title': '机柜号',
'display': True,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@cabinet_num"}
},
'attrs': {'edit-enable':"true", 'k2': '@id'}
},
{
'q': 'idc__name',
'title': '机房',
'display': True,
"text": {
"tpl": "{nid}",
"kwargs": {"nid": "@idc__name"}
},
'attrs': {'edit-enable':"true", 'k2': '@id'}
},
{
'q': None,
"title": "操作",
'display': True,
"text": {
"tpl": "<a href='/del?nid={nid}'>删除</a>",
"kwargs": {"nid": "@id"}
},
'attrs': {'k1': 'v1', 'k2': '@id'}
}
] values_list = []
for row in table_config:
if not row["q"]:
continue
values_list.append(row['q']) server_list = models.Asset.objects.values(*values_list)
print(server_list) ret = {
'server_list': list(server_list),
'table_config': table_config,
'global_dict':{
'device_type_choices':models.Asset.device_type_choices,
'device_status_choices':models.Asset.device_status_choices
}
} return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))
view.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<h4>服务器列表</h4>
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script src="/static/nb-list.js"></script>
<script> $.xx('/backend/curd_json.html'); </script>
</body>
</html>
curd.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<h4>资产列表</h4>
<table class="table table-bordered table-striped">
<thead id="tbHead">
<tr> </tr>
</thead>
<tbody id="tbBody"> </tbody>
</table>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script src="/static/nb-list.js"></script>
<script> $.xx('/backend/asset_json.html') </script>
</body>
</html>
asset.html
(function (jq) {
var GLOBAL_DICT = {}
String.prototype.format=function (arg) {
var temp = this.replace(/\{(\w+)\}/g,function (k,kk) {
return arg[kk];
});
return temp;
};
function initial(url){
$.ajax({
url: url,
type: 'GET',
dataType:'JSON',
success:function(arg){
$.each(arg.global_dict,function (k,v) {
GLOBAL_DICT[k] = v
});
initTableHeader(arg.table_config);
initTableBody(arg.server_list,arg.table_config);
}
})
}
function initTableHeader(tableConfig){
$.each(tableConfig,function(k,v){
if(v.display){
var tag = document.createElement('th');
tag.innerHTML = v.title;
$('#tbHead').find('tr').append(tag);
}
})
}
function initTableBody(serverList,tableConfig){
$.each(serverList,function(k,row){
// [
// {'id': 1, 'asset__business_unit__name': '咨询部',}
// ]
var tr = document.createElement('tr');
$.each(tableConfig,function(kk,rrow){
if(rrow.display) {
var td = document.createElement('td');
//td 中添加内容
var newKwargs = {};
$.each(rrow.text.kwargs, function (kkk, vvv) {
var av = vvv;
if (vvv.substring(0,2) == "@@"){
var global_dict_key = vvv.substring(2,vvv.length);
var nid = row[rrow.q];
console.log(GLOBAL_DICT[global_dict_key]);
$.each(GLOBAL_DICT[global_dict_key],function (gk,gv) {
if(gv[0] == nid){
av = gv[1];
}
})
}
else if (vvv[0] == "@") {
var av = row[vvv.substring(1, vvv.length)];
}
newKwargs[kkk] = av
});
var newText = rrow.text.tpl.format(newKwargs);
td.innerHTML = newText;
//td 中添加属性
$.each(rrow.attrs,function (atkey,atval) {
if (atval[0] == "@") {
td.setAttribute(atkey,row[atval.substring(1, atval.length)]);
}else {
td.setAttribute(atkey,atval)
}
});
$(tr).append(td);
}
});
$('#tbBody').append(tr);
})
}
function trIntoEdit($tr) {
$tr.find("td[edit-enable='true']").each(function () {
//可以编辑的td
//获取原来td中的文本内容
var v1 = $(this).text();
var inp = document.createElement('input');
$(inp).val(v1); //属性和内容相同
$(this).html(inp)
})
}
function trOutEdit($tr) {
$tr.find("td[edit-enable='true']").each(function () {
var inputVal = $(this).find("input").val();
$(this).html(inputVal)
})
}
jq.extend({
xx:function (url) {
initial(url);
$("#tbBody").on('click',':checkbox',function () {
var $tr = $(this).parent().parent();
//检测是否被选中
if($(this).prop('checked')){
//进入编辑模式
trIntoEdit($tr)
}else {
//退出编辑模式
trOutEdit($tr)
}
})
}
})
})(jQuery);
/static/nb-list.js
CMDB (后台管理) CURD 插件的更多相关文章
- CMDB后台管理(AutoServer)
1.表结构设计 from django.db import models class UserProfile(models.Model): """ 用户信息 " ...
- 推荐一个 Laravel admin 后台管理插件
如何优雅的写代码,我想是每位程序员的心声.自从15年初第一次接触 Laravel 4.2 开始,我就迷上使用 Laravel 框架了.我一直都想找个时间好好写写有关 Laravel 的使用文章,由浅入 ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- 安装xadmin后台管理插件
django自带的admin后台管理功能太少.使用国人开发的xadmin后台,使用pip install xadmin安装在线包时,会出错,其中的README.rst是utf8格式,我们win7系统默 ...
- CURD插件（仿Django-admin版）
前言 如何提升自己的开发效率? 每个新项目都是自己经做过的项目(经验所致),在项目开发过程中不断总结.封装属于自己的组件, 例如:每个web项目大部分都涉及增删改查,分页显示,搜素,CRM就是这样的组 ...
- 后台管理UI的选择
最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
- 【tornado】系列项目（二）基于领域驱动模型的区域后台管理+前端easyui实现
本项目是一个系列项目,最终的目的是开发出一个类似京东商城的网站.本文主要介绍后台管理中的区域管理,以及前端基于easyui插件的使用.本次增删改查因数据量少,因此采用模态对话框方式进行,关于数据量大采 ...
- 一套后台管理html模版
最近自己需要一套后台管理的模版,然后去网上查找,模版的确很多,但是适合我的并不多.我需要的模版是不会很大,我能够控制代码,样式不要太古朴,最好有点CSS3的效果.最后终于找到一张主页,然后再根据这个主 ...
- Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
随机推荐
- CF527A：Playing with Paper——题解
https://vjudge.net/problem/CodeForces-527A http://codeforces.com/problemset/problem/527/A 题目大意:一个纸长a ...
- Java实验报告（实验四）
北京电子科技学院(BESTI) 实 验 报 告 课程:Java 班级:1352班 姓名:王国伊 学号:20135207 成绩: 指导 ...
- 征战jQuery
一:jQuery的用途 1>.访问 和 操作 DOM元素 2>.控制 页面样式 3>.对页面事件的处理 4>.方便的使用jQuery插件 5>.与Ajax技术的完美结合 ...
- mybaties分页
首先引入jar包: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId> ...
- udhcpd源码分析3--IP租赁管理
1:重要的结构体 全局链表的成员struct dhcpOfferedAddr *leases 记录了当前租赁出去的IP信息 /* leases.h */ struct dhcpOfferedAddr ...
- Leetcode 234. 回文链表(进阶)
1.题目描述 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O ...
- JupyterHub的安装与配置——让Jupyter支持多用户
1.下载anaconda 打开https://www.continuum.io/downloads,找到自己要的版本 如:https://repo.anaconda.com/archive/Anaco ...
- jquery多组图片层次切换的焦点图
效果:
- js的alert抛出之后怎么让页面停止执行？
方法: 1.如果是form的submit提交,如果要停止,则返回false:如果提交,则返回true就行了. 2.如果是手工跳转的方式,则如果要停止,则不执行跳转代码:如果要提交,则执行跳转代码 示例 ...
- 鸽巢排序Pigeonhole sort
原理类似桶排序,同样需要一个很大的鸽巢[桶排序里管这个叫桶,名字无所谓了] 鸽巢其实就是数组啦,数组的索引位置就表示值,该索引位置的值表示出现次数,如果全部为1次或0次那就是桶排序 例如 var pi ...