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 个模板页 ...
随机推荐
- BZOJ1023：[SHOI2008]仙人掌图——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1023 Description 如果某个无向连通图的任意一条边至多只出现在一条简单回路(simple ...
- "HK"日常之冻结术
在那遥远的MSDN上,有那么一只被隐藏的函数,它掌管着Windows内核威力不容小觑~ 本教程仅作为学习研究,禁止其他用途! 富强.民主.文明.和谐, 自由.平等.公正.法治, 爱国.敬业.诚信.友善 ...
- LibreOJ #6220. sum（数论+构造）
题目大意:在数组中找出一些数,使它们的和能被n整除 这题标签是数学,那我就标题就写数论好了... 显然如果数组中有n的倍数直接取就行. 那假设数组中没有n的倍数,把数组中的数求前缀和后全部%n,会得到 ...
- PowerDesigner 技巧【3】
一.PowerDesigner导出所有SQL脚本: 一般的导出SQL脚本只需要下面两个步骤: 1.database->change current DBMS(选择需要导出的数据库类型): 2.d ...
- CMDB资产管理系统开发【day26】:批准资产入库
刚才都是一条像内存,硬盘,网卡.多条的话如何操作 只有一条数据 下面的是有多条数据的 硬盘必须字段的验证 def __create_disk_component(self): disk_info = ...
- 9.python爬虫--pyspider
pyspider简介 PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI.采用Python语言编写,分布式架构,支持多种数据库后端,强大的WebUI支持脚本编辑器,任务监视器,项 ...
- python基础---输入输出
1.输入字符串. name=input() or name=input('please input a string') 这样可以接收一个字符串,包括空格,都可以输入.只有回车不接受,作为结束符, ...
- 51Nod 1082 | 模拟
Input示例 5 4 5 6 7 8 Output示例 30 55 91 91 155 模拟 #include "bits/stdc++.h" using namespace s ...
- yum快速安装gitlab
安装gitlab前戏使用官方的源,还是比较慢的,gitlab官方提供了一个清华大学的源 新建 /etc/yum.repos.d/gitlab-ce.repo,内容为 源[gitlab-ce]name= ...
- Redis .net 客户端 分布式锁
关于Redis分布式锁的参考链接:http://redis.io/topics/distlock. 在我们项目中,之前琢磨用:ServiceStack.Redis,发现ServiceStack.Red ...