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 个模板页 ...
随机推荐
- BZOJ3172：[TJOI2013]单词——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单 ...
- python高效学习路线图
- 剑桥offer(31~40)
31.题目描述 统计一个数字在排序数组中出现的次数. 思路:找到最低和最高,相减 class Solution { public: int GetNumberOfK(vector<int> ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
- NYOJ 740 DP
“炫舞家“ST 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 ST是一个酷爱炫舞的玩家.TA很喜欢玩QQ炫舞,因此TA也爱屋及乌的喜欢玩跳舞机(Dance Danc ...
- ListView - SimpleAdapter 行间颜色交替(转)
一.概述 通过扩展SimpleAdapter,来改变显示外观.因为要每行的显示颜色,首先要获得每行的View实例,然后调用setBackgroundColor函数设置. 二.实例 [效果] [代码片段 ...
- 数据存储之 SharedPreference 共享参数 (转)
在上一讲中,我们学习了如何将数据存储在SD卡中[数据存储之File文件存储 [即SD卡的写入与读取]],这是一种存储方式,这一讲我们来学习一下使用SharedPreferences存储数据. ...
- ReaderWriterLockSlim 类
今天在看Nop源码时,PluginManager中用到了ReaderWriterLockSlim类,于是简单做个笔记. ReaderWriterLockSlim 表示用于管理资源访问的锁定状态,可实现 ...
- Robot Framework 自定义关键字 Ignore error
以上是关键字的完整写法. 一下是调用该关键字的实例.