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 个模板页 ...
随机推荐
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- 用户登录拦截器查询到登录用户后如何将用户信息传递到后面的Controller
taotao创建订单代码中之前忘了加入用户信息,那么加上呢? 分析:用户创建订单的时候,我们会强制要求用户先登录,也就是说,创建订单的Controller执行时,一定是用户已经登录了的,而用户只要登录 ...
- ACE线程管理机制-线程的创建与管理
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/04/581369.html 有过在不同的操作系统下用c++进行过多线程编程的朋友对那些线程处理 ...
- 照片EXIF信息的读取和改写的JAVA实现
由于项目需要对照片的EXIF信息进行处理,因此在网上搜索了一番.捣鼓出来了,写下,总结. 需要用到2个jar包,metadata-extractor-2.3.1和mediautil-1.0.这2个ja ...
- 数据结构：Rope-区间翻转
BZOJ1269 上一篇文章介绍了Rope的简单应用,这里多了一个操作,区间翻转 同时维护一正一反两个rope……反转即交换两个子串 下面给出代码: #include<cstdio> #i ...
- LightOJ 1226 - One Unit Machine Lucas/组合数取模
题意:按要求完成n个任务,每个任务必须进行a[i]次才算完成,且按要求,第i个任务必须在大于i任务完成之前完成,问有多少种完成顺序的组合.(n<=1000 a[i] <= 1e6 mod ...
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
- 超详细的Java面试题总结（一）之Java基础知识篇
面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的因 ...
- mybatis 插入语句name no find
1.可参考连接:https://www.cnblogs.com/thomas12112406/p/6217211.html 2.dao层的配置 void addUser(@Param("un ...
- javascript延迟对象
1.模拟任务队列: function taskQueue() { var taskList = []; var isRun = false; this.addTask = function (task ...