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 个模板页 ...
随机推荐
- BZOJ4753：[JSOI2016]最佳团体——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4753 JSOI信息学代表队一共有N名候选人,这些候选人从1到N编号.方便起见,JYY的编号是0号. ...
- BZOJ4105 [Thu Summer Camp 2015]平方运算 【线段树】
题目链接 BZOJ4105 题解 平方操作orz,虽说应该是线段树,但是不会维护啊QAQ 小瞧一眼题解... 平方成环?环长\(lcm\)小于\(60\)? 果然还是打表找规律题.... 那就很好做了 ...
- React注释
React中注释有以下三种 var content = ( <Nav> {/* 一般注释, 用 {} 包围 */} <Person /* 多 行 注释 */ name={window ...
- bzoj3524: [Poi2014]Couriers（主席树）
主席树(可持久化权值线段树)初探... 修改一个点只对树上logn个点有影响,所以新建logn个点就行了,总共新建mlogn个点. 查询一个区间[l,r],相当于将数一个一个加进树,询问第l到第r次操 ...
- Codechef MARCH14 GERALD07加强版
强制在线不代表不能预处理! 考虑暴力怎么干? 开始n个联通块.now=n 不断加入边,如果连接两个联通块,--now 否则不动. 后者的前提是和[l,id-1]的边构成环 所以,我们考虑每个[l,r] ...
- SpringMVC源码解析-HTTP请求处理和分发
1.HandlerMapping的配置和设计 在初始化完成时,所有的handlerMapping都已经被加载,handlerMapping存储着HTTP请求对应的映射数据,每一个handlerMapp ...
- STL之五：set/multiset用法详解
集合 转载于:http://blog.csdn.net/longshengguoji/article/details/8546286 使用set或multiset之前,必须加入头文件<set&g ...
- rn初体验
react-native 需要的工具 .nodejs .rn cli .xcode and as ---------------- 打开终端,切换到根路径(mac中修改npm的默认安装来源) 一.op ...
- MFC:CTime类和CTimeSpan类
CTime类 CTime类表示日期和时间,上限是3000年12月31日,下限是1970年1月1日 12:00:00 AM GMT. CTime(); 构造一个未经初始化的CTime对象.此状态的CTi ...
- npm 淘宝镜像安装以及安装报错window_nt 6.1.7601 解决
http://www.cnblogs.com/ycxhandsome/p/6562980.html npm config set proxy null npm config set https-pro ...