记录分类书大类生成【一个较为复杂的面向对象】

周大胖子 · 发表于 2019-7-17 23:22:32

<html>
<head>
<meta charset="utf-8" />
<title>分类书展示</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/src/style/site.css" />
<style>
.nice-paragraph .nice-paragraph-title {
margin-left: 5px;
}
.nice-paragraph .nice-paragraph-asterisk {
margin-left: 14px;
}
.nice-paragraph .nice-paragraph-NonStandard {
margin-left: 14px;
font-style: italic;
}
.nice-paragraph {
white-space: keep-all !important;
}
.nice-paragraph a {
display: inline-block;
width: auto !important;
padding: 0px 8px !important;
margin: 2px !important;
line-height: 2.4;
}
.nice-paragraph .nice-paragraph-note {
margin: 15px;
color: #ccc;
}
.nice-group-note {
margin: 15px;
color: #222;
}
.nice-read .nice-read-main{
height: auto !important;
}
</style>
</head>
<body>
<div class="layer-page">
<div class="nice-read">
<div class="nice-read-search">
<form
class="layui-form table-header-tools"
action=""
lay-filter="search-form-group"
>
<div class="layui-row layui-col-space10">
<div class="layui-col-sm12 text-right">
<div class="layui-form-item">
<div class="input-group">
<input
type="text"
name="content"
placeholder="搜索关键词"
autocomplete="off"
class="layui-input"
/>
<span class="input-group-append">
<a
href="javacript:void(0);"
class="layui-btn"
>搜索</a
>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="nice-read-main">
<div class="left-side">
<ul id="mtype-show">
</ul>
</div>
<div class="main-side">
<div class="title">
<h1
class="font-bold letter-spacing-4 text-center"
id="mo-cnum"
>
第一类
</h1>
<h4 id="mo-ctitle">
用于工业、科学、摄影、农业、园艺和林业的化学品；未加工人造合成树脂；未加工塑料物质；肥料；灭火用合成物；淬火和焊接用制剂；保存食品用化学品；鞣料；工业用粘合剂。
</h4>
</div>
<div class="notes">
<h4 class="text-center">【注释】</h4>
<p id="cnotes">
</p>
</div>
<div class="main" id="main">
</div>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
// 按钮类
function Abtn(j, fn) {
this.data = j;
this.title = j.spfw;
this.xtype = j.xtype || "";
this.callback = fn;
}
Abtn.prototype.render = function() {
this.a = document.createElement("a");
this.a.href = "javacript:void(0);";
this.a.innerHTML = this.title + this.xtype;
var self = this;
this.a.onclick = function() {
self.callback(self.data);
};
return this.a;
};
// 类似群的类展示[一个类似群json]
function MGroup(j) {
this.j = j;
this.ctype = j.ctype;
this.mtype = j.mtype;
this.title = j.title;
}
MGroup.prototype.render = function() {
this.box = document.createElement("div");
this.box.classList.add("group");
this.h = document.createElement("h4");
this.h.classList.add("text-center", "mb-2");
this.h.innerHTML = this.mtype + this.title;
this.main = document.querySelector("#main");
this.main.appendChild(this.box);
this.box.appendChild(this.h);
let p_arr = this.j.p;
let self = this;
// 循环拿段落
for(var i=0; i<p_arr.length; i++ )
{
let pitem = document.createElement('div');
pitem.classList.add("nice-paragraph");
let ptspan = document.createElement('span');
ptspan.classList.add("nice-paragraph-title");
ptspan.innerHTML = p_arr[i].cnum || '';
pitem.appendChild(ptspan);
// 主体
for (var k = 0; k < p_arr[i].cen.length; k++)
{
let aj = {
mtype: self.mtype,
ctype: self.ctype,
xtype: p_arr[i].cen[k].xtype,
spfw: p_arr[i].cen[k].spfw
};
let abtn = new Abtn(aj, function(e) {
console.log(e);
});
pitem.appendChild( abtn.render() );
}
// 段落注释
if(p_arr[i].notes.length >0){
let pnociebox = document.createElement('div');
pnociebox.classList.add("nice-paragraph-note");
let pnocietitle = document.createElement('span');
pnocietitle.innerHTML = '段落注释：';
pnociebox.appendChild(pnocietitle);
let pnocieui = document.createElement('ui');
for(var k =0; k<p_arr[i].notes.length; k++)
{
let pnocieli = document.createElement('li');
pnocieli.innerHTML = p_arr[i].notes[k];
pnocieui.appendChild(pnocieli);
}
pnociebox.appendChild(pnocieui);
pitem.appendChild(pnociebox);
}
self.box.appendChild(pitem);
}
// 九十八非规范
if(this.j.x98.length>0)
{
let fbox = document.createElement('div');
fbox.classList.add("nice-paragraph");
let fspan = document.createElement('span');
fspan.classList.add("nice-paragraph-NonStandard");
fspan.innerHTML = '非规范商品：';
fbox.appendChild(fspan);
for(var i=0; i<self.j.x98.length; i++)
{
let aj={
mtype : self.mtype,
ctype : self.ctype,
xtype : '',
spfw : self.j.x98[i]
}
let abtn = new Abtn(aj, function(e) {
console.log(e);
});
// console.log(1)
fbox.appendChild( abtn.render() )
}
self.box.appendChild( fbox );
}
// 类似群注释
if( this.j.notes.length >0 )
{
let mnbox = document.createElement('div');
mnbox.classList.add("nice-group-note");
let mnpan = document.createElement('span');
mnpan.innerHTML = '类似群注释：';
mnbox.appendChild(mnpan);
let mnui = document.createElement('ui');
mnbox.appendChild(mnui);
for( var i=0; i<self.j.notes.length; i++)
{
let mnli = document.createElement('li');
mnli.innerHTML = self.j.notes[i];
mnui.appendChild( mnli );
}
self.box.appendChild(mnbox);
}
};
</script>
<script>
// 获取URL中的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
// 大类数字转汉字
function toCnum(a) {
let str = "";
a = Number(a);
arrcnum = [
"十",
"一",
"二",
"三",
"四",
"五",
"六",
"七",
"八",
"九"
];
// 大类转化为中文
if (a > 9) {
str +=
arrcnum[parseInt(a / 10)] +
"" +
arrcnum[0] +
"" +
arrcnum[a % 10];
} else {
str += arrcnum[a];
}
return str;
}
// 展示大类的注释
function showCnotes(na) {
let strgs = ""; // 概述
let strbk = ""; // 尤其包括
let strnb = ""; // 尤其不包括
for (var i = 0; i < na.length; i++) {
switch (na[i].k) {
case 3:
strgs += na[i].txt + "<br />";
break;
case 1:
strbk += " ——" + na[i].txt + "<br />";
break;
case 2:
strnb += " ——" + na[i].txt + "<br />";
break;
}
}
if (strbk.length !== 0) {
strbk = "本类尤其包括：<br />" + strbk;
}
if (strbk.length !== 0) {
strnb = "本类尤不其包括：<br />" + strnb;
}
let str = strgs + strbk + strnb;
return str;
}
function mShowLeft( j )
{
this.box = document.querySelector("#mtype-show");
this.item = document.createElement('li');
this.a = document.createElement('a');
this.a.classList.add('left-side-item');
this.a.href = "javacript:void(0);";
this.div1 = document.createElement('div');
this.div1.classList.add('side-title');
this.div1.innerHTML = j.mtype;
this.div2 = document.createElement('div');
this.div2.classList.add('side-sub');
this.div2.innerHTML = j.title;
this.box.appendChild(this.item);
this.item.appendChild(this.a);
this.a.appendChild(this.div1)
this.a.appendChild(this.div2)
}
</script>
<script>
layui.use(["table"], function() {
var $ = layui.jquery;
var table = layui.table;
// 获取父页面的域名 [省得每个都设置 ]
var mo_url = parent.mo_url;
var ctype = getQueryVariable("c");
$.ajax({
type: "POST",
url: mo_url + "api/wifi/out",
dataType: "json",
data: {
key: "c",
ctype: ctype
},
success: function(res) {
console.log(res);
showBig(res.data);
}
});
// 主要的展示类型
function showBig(e) {
// 头部
$("#mo-cnum").html("第" + toCnum(e.c.ctype) + "类");
$("#mo-ctitle").html(e.c.jieshao);
// 大类的注释
$("#cnotes").html(showCnotes(e.cnotes));
// 清空
$(".main").html('');
// 添加类似群
for (var i = 0; i < e.m.length; i++) {
let mgroup = new MGroup(e.m[i]);
mgroup.render();
let ms = new mShowLeft(e.m[i]);
}
}
table.render({
elem: "#search-results",
url: "../../../start/json/table/nice-class.js",
height: "full-60",
cellMinWidth: 80,
page: true,
limit: 30,
cols: [
[
{ type: "checkbox" },
{
field: "id",
title: "ID",
width: 100,
align: "center"
},
{
field: "nice",
title: "类别",
width: 100,
align: "center"
},
{
field: "sml",
title: "近似群",
width: 120,
align: "center"
},
{
field: "number",
title: "商品编号",
width: 120,
align: "center"
},
{ field: "name", title: "商品名称" },
{
field: "splb",
title: "商品类型",
width: 120,
align: "center"
}
]
]
});
});
</script>
</body>
</html>

复制代码

记录分类书 大类生成【一个较为复杂的面向对象】

记录分类书大类生成【一个较为复杂的面向对象】