效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了一个简单的demo,不嫌弃的话可以自己再改改样式 )
准备:layUI 、treeTable.js
代码展示:
@RequestMapping(params = "list")
public ModelAndView list(HttpServletRequest request) {
int total = 0;// 一级机构总数
// 获取一级机构总数
String sql_total = "select count(1) total from t_s_depart where org_type = '1'";
List> list_total = systemService.findForJdbc(sql_total);
if(!ListUtils.isNullOrEmpty(list_total)){
for (Map map : list_total) {
total = Integer.parseInt(map.get("total")==null?"0":map.get("total").toString());
}
}
request.setAttribute("total", total);
return new ModelAndView("com/szerp/department/tSDepartListNew");
}
@RequestMapping(params = "getDataNew")
@ResponseBody
public List getDataNew(HttpServletRequest request, HttpServletResponse response) throws IOException{
int page = request.getParameter("curr")==null?1:Integer.parseInt(request.getParameter("curr").toString());
int limit = request.getParameter("limit")==null?1:Integer.parseInt(request.getParameter("limit").toString());
// 分页数据
String sql_data = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from (select rownum num,d.* from t_s_depart d where d.org_type = '1') where num > "+((page-1)*limit)+" and num <= "+(page*limit);
List> list_data = systemService.findForJdbc(sql_data);
List listDepart = new ArrayList();
String ids = "";
if(!ListUtils.isNullOrEmpty(list_data)){
for (Map map : list_data) {
ids = ids + "'" + (map.get("ID")==null?"":map.get("ID").toString()) + "',";
TSDepartEntity tSDepart = new TSDepartEntity();
tSDepart.setId(map.get("ID")==null?"":map.get("ID").toString());
tSDepart.setDepartname(map.get("DEPARTNAME")==null?"":map.get("DEPARTNAME").toString());
tSDepart.setDescription(map.get("DESCRIPTION")==null?"":map.get("DESCRIPTION").toString());
tSDepart.setParentdepartid(map.get("PARENTDEPARTID")==null?"":map.get("PARENTDEPARTID").toString());
tSDepart.setOrgCode(map.get("ORG_CODE")==null?"":map.get("ORG_CODE").toString());
tSDepart.setOrgType(map.get("ORG_TYPE")==null?"":map.get("ORG_TYPE").toString());
tSDepart.setMobile(map.get("MOBILE")==null?"":map.get("MOBILE").toString());
tSDepart.setFax(map.get("FAX")==null?"":map.get("FAX").toString());
tSDepart.setAddress(map.get("ADDRESS")==null?"":map.get("ADDRESS").toString());
tSDepart.setDepartOrder(map.get("DEPART_ORDER")==null?"":map.get("DEPART_ORDER").toString());
listDepart.add(tSDepart);
}
}
ids = "("+ids.substring(0, ids.length()-1)+")";
String sql = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from t_s_depart where parentdepartid in"+ids;
List> list_data2 = systemService.findForJdbc(sql);
if(!ListUtils.isNullOrEmpty(list_data2)){
return getNext(listDepart, list_data2, ids);
}
return listDepart;
}
public List getNext(List listDepart, List> list_data2, String ids){
String ids_ = "";
for (Map map : list_data2) {
ids_ = ids_ + "'" + (map.get("ID")==null?"":map.get("ID").toString()) + "',";
TSDepartEntity tSDepart = new TSDepartEntity();
tSDepart.setId(map.get("ID")==null?"":map.get("ID").toString());
tSDepart.setDepartname(map.get("DEPARTNAME")==null?"":map.get("DEPARTNAME").toString());
tSDepart.setDescription(map.get("DESCRIPTION")==null?"":map.get("DESCRIPTION").toString());
tSDepart.setParentdepartid(map.get("PARENTDEPARTID")==null?"":map.get("PARENTDEPARTID").toString());
tSDepart.setOrgCode(map.get("ORG_CODE")==null?"":map.get("ORG_CODE").toString());
tSDepart.setOrgType(map.get("ORG_TYPE")==null?"":map.get("ORG_TYPE").toString());
tSDepart.setMobile(map.get("MOBILE")==null?"":map.get("MOBILE").toString());
tSDepart.setFax(map.get("FAX")==null?"":map.get("FAX").toString());
tSDepart.setAddress(map.get("ADDRESS")==null?"":map.get("ADDRESS").toString());
tSDepart.setDepartOrder(map.get("DEPART_ORDER")==null?"":map.get("DEPART_ORDER").toString());
listDepart.add(tSDepart);
}
ids_ = "("+ids_.substring(0, ids_.length()-1)+")";
String sql = "select id,departname,description,parentdepartid,org_code,org_type,mobile,fax,address,depart_order from t_s_depart where parentdepartid in"+ids_;
List> list = systemService.findForJdbc(sql);
if(!ListUtils.isNullOrEmpty(list)){
getNext(listDepart, list, ids_);
}
return listDepart;
}
treeTable.js代码如下:
layui.define(['jquery'], function(exports) {
var MOD_NAME = 'treeTable',
o = layui.jquery,
tree = function() {};
tree.prototype.config = function() {
return {
top_value: 0,
primary_key: 'id',
parent_key: 'parentdepartid',
hide_class: 'layui-hide',
icon: {
open: 'layui-icon layui-icon-triangle-d',
close: 'layui-icon layui-icon-triangle-r',
left: 16,
},
cols: [],
checked: {},
is_click_icon: false,
is_checkbox: false,
is_cache: true,
};
}
tree.prototype.template = function(e) {
var t = this,
level = [],
tbody = '',
is_table = o('table' + e.elem).length || !(e.is_click_icon = true),
checkbox = e.is_checkbox ? '
' : '',
checked = checkbox ? checkbox.replace('cbx', 'cbx layui-form-checked') : '',
thead = checkbox && '' + (o.inArray(e.top_value, e.checked.data) > -1 ? checked : checkbox) + ' ';
o.each(t.data(e, e.data), function(idx, item) {
var tr = '',
is_checked = false,
hide_class = (item[e.parent_key] == e.top_value) || (item[e.parent_key] == t.cache(e, item[e.parent_key])) ? '' : e.hide_class;
// 设置每行数据层级
item.level = level[item[e.primary_key]] = item[e.parent_key] != e.top_value ? (level[item[e.parent_key]] + 1) : 0;
// 设置是否为最后一级
item.is_end = !e.childs[item[e.primary_key]];
o.each(e.cols, function(index, obj) {
var style = '';
obj.width && (style += 'width:' + obj.width + ';'), obj.align && (style += 'text-align:' + obj.align + ';'), style && (style = 'style="' + style + '"');
// 标记设置行checkbox选中
if(e.is_checkbox && e.checked && o.inArray(item[e.checked.key], e.checked.data) > -1) {
is_checked = true;
}
// 第一次遍历头部的时候拼接表格头部
idx || (thead += '' + obj.title + ' ');
// 指定列加入开启、关闭小图标
var icon = (obj.key == e.icon_key && !item.is_end) ? ' ' : ' ';
// 指定列小图标按照层级向后位移
var left = (obj.key == e.icon_key ? level[item[e.primary_key]] * e.icon.left + 'px' : '');
icon = icon.replace('>', ' style="margin-left:' + left + ';">');
// 拼接行
tr += '' + icon + (is_table ? '' : (is_checked ? checked : checkbox)) + (obj.template ? obj.template(item) : item[obj.key]) + ' ';
});
var box = is_table ? o(is_checked ? checked : checkbox).wrap('').parent().prop('outerHTML') : '';
tbody += ' ' + box + tr + ' ';
});
// 处理表树和树的赋值模板
var table = is_table ? '' + thead + ' ' + tbody + ' ' : tbody.replace(//g, 'ul>').replace(//g, 'li>');
// 确认点击图标或点击列触发展开关闭
var click_btn = e.is_click_icon ? '[data-down] i:not(.layui-icon-ok)' : '[data-down]';
// 模板渲染并处理点击展开收起等功能
o(e.elem).html(table).off('click', click_btn).on('click', click_btn, function() {
var tr = o(this).parents('[data-id]'),
td = tr.find('[data-down]'),
id = tr.data('id'),
parentdepartid = tr.data('parentdepartid'),
is_open = (td.find('i:not(.layui-icon-ok)').attr('class') == e.icon.close);
if(is_open) {
// 展开子级(子级出现、更改图标)
td.find('i:not(.layui-icon-ok)').attr('class', e.icon.open);
td.parents(e.elem).find('[data-parentdepartid=' + id + ']').removeClass(e.hide_class);
t.cache(e, id, true);
} else {
// 关闭子级(更改图标、隐藏所有子孙级)
td.find('i:not(.layui-icon-ok)').attr('class', e.icon.close);
t.childs_hide(e, id);
}
// 设置监听展开关闭
layui.event.call(this, MOD_NAME, 'tree(flex)', {
elem: this,
item: e.childs[parentdepartid][id],
table: e.elem,
is_open: is_open,
})
}).off('click', '.cbx').on('click', '.cbx', function() {
var is_checked = o(this).toggleClass('layui-form-checked').hasClass('layui-form-checked'),
tr = o(this).parents('[data-id]'),
id = tr.data('id'),
parentdepartid = tr.data('parentdepartid');
t.childs_checkbox(e, id, is_checked);
t.parents_checkbox(e, parentdepartid);
// 设置监听checkbox选择
layui.event.call(this, MOD_NAME, 'tree(box)', {
elem: this,
item: parentdepartid === undefined ? {} : e.childs[parentdepartid][id],
table: e.elem,
is_checked: is_checked,
})
}).off('click', '[lay-filter]').on('click', '[lay-filter]', function() {
var tr = o(this).parents('[data-id]'),
id = tr.data('id'),
parentdepartid = tr.data('parentdepartid'),
filter = o(this).attr("lay-filter");
return layui.event.call(this, MOD_NAME, 'tree(' + filter + ')', {
elem: this,
item: e.childs[parentdepartid][id],
})
});
e.end && e.end(e);
};
// 同级全部选中父级选中/同级全部取消取消父级
tree.prototype.parents_checkbox = function(e, parentdepartid) {
var po = o(e.elem).find('[data-parentdepartid=' + parentdepartid + ']'),
co = o(e.elem).find('[data-id=' + parentdepartid + ']'),
len = o(e.elem).find('[data-parentdepartid=' + parentdepartid + '] .cbx.layui-form-checked').length;
if(po.length == len || len == 0) {
var parentdepartid = co.data('parentdepartid');
len ? co.find('.cbx').addClass('layui-form-checked') : co.find('.cbx').removeClass('layui-form-checked');
parentdepartid === undefined || this.parents_checkbox(e, parentdepartid);
}
};
// 子级反选
tree.prototype.childs_checkbox = function(e, id, is_checked) {
var t = this;
o(e.elem).find('[data-parentdepartid=' + id + ']').each(function() {
var checkbox = o(this).find('.cbx');
is_checked ? checkbox.addClass('layui-form-checked') : checkbox.removeClass('layui-form-checked');
t.childs_checkbox(e, o(this).data('id'), is_checked);
})
};
// 点击收起循环隐藏子级元素
tree.prototype.childs_hide = function(e, id) {
var t = this;
t.cache(e, id, false);
o(e.elem).find('[data-parentdepartid=' + id + ']:not(.' + e.hide_class + ')').each(function() {
var td = o(this).find('[data-down]'),
i = td.find('i:not(.layui-icon-ok)');
// 关闭更换小图标
i.length && i.attr('class', e.icon.close);
// 隐藏子级
td.parents(e.elem).find('[data-parentdepartid=' + id + ']').addClass(e.hide_class);
t.childs_hide(e, o(this).data('id'))
});
};
// 重新组合数据,父子级关系跟随
tree.prototype.data = function(e) {
var lists = [],
childs = [];
o.each(e.data, function(idx, item) {
lists[item[e.primary_key]] = item;
if(!childs[item[e.parent_key]]) {
childs[item[e.parent_key]] = [];
}
childs[item[e.parent_key]][item[e.primary_key]] = item;
});
e.childs = childs;
return this.tree_data(e, lists, e.top_value, []);
};
tree.prototype.tree_data = function(e, lists, parentdepartid, data) {
var t = this;
if(lists[parentdepartid]) {
data.push(lists[parentdepartid]);
delete lists[parentdepartid]
}
o.each(e.data, function(index, item) {
if(item[e.parent_key] == parentdepartid) {
data.concat(t.tree_data(e, lists, item[e.primary_key], data))
}
});
return data;
};
tree.prototype.render = function(e) {
var t = this;
e = o.extend(t.config(), e);
if(e.url) {
o.get(e.url, function(res) {
e.data = res;
t.template(e);
})
} else {
t.template(e);
}
return e;
};
// 获取已选值集合
tree.prototype.checked = function(e) {
var ids = [];
o(e.elem).find('.cbx.layui-form-checked').each(function() {
var id = o(this).parents('[data-id]').data('id');
ids.push(id);
})
return ids;
};
// 全部展开
tree.prototype.openAll = function(e) {
var t = this;
o.each(e.data, function(idx, item) {
item[e.primary_key] && t.cache(e, item[e.primary_key], true);
})
t.render(e);
}
// 全部关闭
tree.prototype.closeAll = function(e) {
localStorage.setItem(e.elem.substr(1), '');
this.render(e);
}
tree.prototype.on = function(events, callback) {
return layui.onevent.call(this, MOD_NAME, events, callback)
};
// 存储折叠状态
tree.prototype.cache = function(e, val, option) {
if(!e.is_cache) {
return false;
}
var t = this,
name = e.elem.substr(1),
val = val.toString(),
cache = localStorage.getItem(name) ? localStorage.getItem(name).split(',') : [],
index = o.inArray(val, cache);
if(option === undefined) {
return index == -1 ? false : val
}
if(option && index == -1) {
cache.push(val)
}
if(!option && index > -1) {
cache.splice(index, 1)
}
localStorage.setItem(name, cache.join(','));
};
var tree = new tree();
exports(MOD_NAME, tree)
});
更改父级ID字段时,别忘记treeTable.js中也要一同更改哦(以上展示代码为初版demo,若需使用建议优化,还有不要跟我一样不是正式发行版代码就不写备注 )
你可能感兴趣的:(JAVA_树状表格分页(layUI、treeTable.js))
UI学习——cell的复用和自定义cell
Magnetic_h
ui 学习
目录cell的复用手动(非注册)自动(注册)自定义cellcell的复用在iOS开发中,单元格复用是一种提高表格(UITableView)和集合视图(UICollectionView)滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时,如果没有可复用的单元格,则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕,它就不会被销毁。相反,它被添
vue3中el-table中点击图片放大时,被表格覆盖
叫我小鹏呀
vue.js javascript 前端
问题:vue3中el-table中点击图片放大时,被表格覆盖。解决方法:el-image添加preview-teleported
vue项目element-ui的table表格单元格合并
酋长哈哈
vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
vue+el-table 可输入表格使用上下键进行input框切换
以对_
vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
Dockerfile FROM 两个
redDelta
Docker相关视频讲解:什么是容器Docker介绍实现"DockerfileFROM两个"的步骤步骤表格步骤操作1创建一个Dockerfile文件2写入FROM指令3构建第一个镜像4创建第二个Dockerfile文件5写入FROM指令6构建第二个镜像7合并两个镜像操作步骤说明步骤1:创建一个Dockerfile文件使用任意文本编辑器创建一个名为Dockerfile的文件。登录后复制#Docker
【Golang】实现 Excel 文件下载功能
RumIV
Golang golang excel 开发语言
在当今的网络应用开发中,提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式,通常是数据导出的首选格式之一。在本教程中,我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件,并允许用户通过HTTP请求下载该文件。准备工作在开始之前,请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外,您还需要安装GinWeb框架和excelize包,这两个包都将用于我
【Golang】使用 Golang 语言和 excelize 库将数据写入Excel
不爱洗脚的小滕
golang excel 开发语言
文章目录前言一、Excelize简介二、代码实现1.获取依赖2.示例代码三、总结前言在数据处理和分析中,Excel作为一种常见的电子表格格式,被广泛应用于各种场景。然而,如何在Go语言中有效地处理Excel文件呢?在这篇博客中,我将介绍如何使用Go语言和excelize库将数据写入Excel文件。一、Excelize简介Excelize是一个用于读取和写入MicrosoftExcel™(XLSX)
ElasticSearch查询超过10000条(1000页)时出现Result window is too large的问题
王月亮17
问题当ES数据量较大,使用分页查询超过10000条(1000页)时,出现如下错误:Cannotexecutejestaction,responsecode:500,error:{"root_cause":[{"type":"query_phase_execution_exception","reason":"Resultwindowistoolarge,from+sizemustbelesstha
MySQl篇(SQL - 基本介绍)(持续更新迭代)
wclass-zhengge
mysql sql 数据库
目录一、简介二、SQL方言(分页查询为例)1.简介2.SQL方言大比拼2.1.Oracle2.1.1.使用ROWNUM实现分页查询2.1.2.使用ROW_NUMBER()实现分页查询2.2.MySQL2.3.PostgreSQL三、语法规范四、注释五、MySQL脚本中的标点符号一、简介1、SQL是结构化查询语言(StructureQueryLanguage),专门用来操作/访问关系型数据库的通用语
2020.5.20【第三十八天打卡】
CY的好运很哇塞呦
2020.5.20【第三十八天打卡】:一、今日进度:1.会计直播课程:《经济法基础》两个小时,主要内容:经济法基础相关理论知识~纯理论的课程,加上心里的烦躁,完整地听完一节课,真的是太难为自己了,需要明天重新看一遍回放。2.读其他书7章。二、今日待进步:1.练字0%2.表格学习0%3.TED0%三、明日安排:(一)每日常规三件事:1.读书半小时2.练字半小时3.学习半小时(二)每日新增一事(兴趣工
对待工作的态度
杨奶茶
今天下午听了教授的一番话,听了很认真,人要学着傻,我就是以为自己很聪明,其实聪明反被聪明误,以前总是眼高手低,总觉得不给好处不做,什么都想谈条件,往往这样我得不到成长而且做事态度也很差,我现在才明白,什么事情先去做,而且认真做好,有一句话是但行好事,莫问前程。首先把事情做好,晚上美美让我做表格,其实我是最头疼表格的,眼睛都看花了,但是我内心里面我是很开心的,我喜欢承担责任,表格不会我可以学,做的慢
【Axure高保真原型】冻结固定中继器表格首列模板
梓贤Vigo
Axure 原型 交互 产品经理 中继器
今天和大家分享冻结固定中继器表格首列的原型模板,当中继器表格列数较多时,通过拖动滚动条左右查看内容时,可以把首列冻结固定,方便我们查看。这个原型模板是用中继器制作的,所以使用也非常方便,在中继器表格里维护数据信息,预览时既可以生成高保真的交互效果。这套模板里面也提供固定左侧二列,或者你也可以用同样的方法,固定左侧多列。具体效果可以观看下方视频或者点击预览地址体验:【原型效果】【Axure高保真原型
前端HTML+CSS+JS的入门学习
俊昭喜喜里
前端 html css
一.HTMLHTML(HyperTextMarkupLanguage)即超文本标记语言,是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言,而是一种标记语言,通过一系列的元素(elements)来告诉浏览器如何显示网页上的内容,如文本、图片、链接、表格、列表等。HTML文档由一系列的标签(tags)组成,这些标签告诉浏览器如何显示内容。标签通常成对出现,例如和,其中是开始标签,表示一个
excel打开html非常慢,解决EXCEL表格打开缓慢,文件异常臃肿庞大
史文林
excel打开html非常慢
相信很多每天在操作EXCEL的朋友,会觉得自己的表格一天比一天大,一天比一天打开慢,但表格里面实际也没多少内容。这其中的主要原因之一,就是你喜欢在多个表格之间互相复制来复制去,粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了,导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧!1.看这个“源文件”,文件大小居然达到了
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示
睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格,可以填数的表格控件?首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
动态生成的html元素绑定click事件
.NET跨平台
Jquery及其组件 html jquery
第一篇博客,开启技术博客的生涯,欢迎大家批评指教(坚信妹子也可以做好程序猿)今天想说帮公司做项目的时候遇到的一个小问题,动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行,然后序列号还要随着增加,当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决,但是发现一个问题会出现事件绑定很多次
springboot+mybatisplus实现基本的增删改查以及分页查询。这里使用的是Restful风格包括简单描述Restful是什么
okchan666
spring boot java
先实现springboot+mybatisplus的增删改查接口使用postman测试:第一步创建项目导入依赖:直接给大家了:4.0.0org.springframework.bootspring-boot-starter-parent2.6.6com.okchanspringboot_07_ssmp0.0.1-SNAPSHOT1.8org.springframework.bootspring-b
网上商城项目总结 续
猫只i
java web 电子商城 结构
前台1.用户登录注册邮箱验证校验用户名是否存在验证码自动登录2.导航条自定义标签库采用异步读取数据(使用gson将集合转换json数据)Redis服务器3.首页热门商品查询展示4.分类列表分页查询5.商品详情用cookie实现浏览记录6.购物车实现商品添加到购物车商品的查询,添加,修改,删除清空购物车7.提交订单添加订单(订单详情)确认订单(易宝支付)8.我的订单9.Fliter定义权限拦截(提交
【爸爸带娃 日更174】吃维生素的计算机思考
蓝色眼镜007
中午,家里人为了有没有给冬冬喂过维生素,而反复确认。问冬冬,她就算吃了,也就是很被动的张口,而且每天都吃,她也不清楚。再问当事人,因为也是每天都喂,也不太确定。好像吃了,好像又没吃。有时,A顺手已喂冬冬吃了,B却并不知道。确认混乱。其实,无非就是没有「中心化数据库」嘛。以后,在墙上贴张表格,不管谁喂完后,就马上在上面打个勾。或者,每天的量都用纸包起来,纸外面写上日期,吃完就扔,这是「分布的思维」。
讲解Linux内核操作系统——进程状态与转换
Linux加油站
网络 服务器 运维
一.进程控制进程控制的主要功能是对系统中的所有进程实施有效的管理,它具有创建新进程、撤销已有进程、实现进程状态转换等功能。在操作系统中,一般把进程控制用的程序段称为原语,原语的特点是执行期间不允许中断,它是一个不可分割的基本单位。1.1创建进程UNIX中进程为树状层次结构,Windows下所有进程没有层次结构允许一个进程创建另一个进程,创建者称为父进程,被创建的进程称为子进程。子进程可以继承父进程
【设计模式】结构型模式:组合模式
KunQAQrz
意图使用组合模式可以将对象组合成树状结构,并且能像使用独立对象一样使用它们。组合模式结构在这里插入图片描述组件(Component)接口描述了树中简单项目和复杂项目所共有的操作。叶节点(Leaf)是树的基本结构,它不包含子项目。一般情况下,叶节点最终会完成大部分的实际工作,因为它们无法将工作指派给其他部分。容器(Container)又名“组合(Composite)”是包含叶节点或其他容器等子项目的
vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码
weixin_40008969
vue 表格左右拖拽调整列宽
写在最前最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样这是我最终的实现效果还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节。实现原理如上图所示,我们需要将要实
利用Python3爬取下载bookset网站的kindle电子书
nobodyyang
突然间发现这个网站,可以下载很多kindle电子书。观摩了下,和前段时间刚写的爬取头条有点类似。 该网站链接首页:https://bookset.me/,这次爬取排行榜链接:https://bookset.me/?rating=douban,打开观察发现排行榜其实真正分页规则是https://bookset.me/page/num?rating=douban,其中num代表页数。具体代码如下
windows 列出文件的树形结构(tree的用法)
abments
办公工具 windows
在Windows操作系统中,tree命令是一个强大的命令行工具,用于以树状结构显示指定路径下的目录和文件。这对于快速查看文件和文件夹的层次结构非常有用,尤其是在大型项目或文件系统中。以下是tree命令的基本用法和一些高级功能:基本用法显示当前目录及其子目录结构:在命令行中输入tree(不带任何参数)将显示当前目录及其所有子目录的结构。显示指定路径下的目录结构:可以通过在tree命令后指定一个路径来
10.web应用体系以及windows网络常见操作应用
XXX-17
软件测试 软件测试
一、Dos命令1.启动方式:win+R,输入cmd2.切换盘符/路径:盘符名称+:(C:)cd目录(cdB111)(目录名按table键自动补全)3.查看目录:dirdir/p分页展示目录及文件dir/b展示文件名称4.创建文件夹:md文件夹名(mdt1)5.删除文件夹:rd文件夹名(rdt1)删除文件:del文件名(del222.txt)6.复制文件:copy复制文件目标路径(copymaste
前端页面实现table可拖动改变列宽
牧 码 人
js jQuery js 表格拖动 css colResizable
此处实现页面的table表格可以自由拖动列宽,拖动时表格内文字不换行,超出部分以...代替,实现步骤如下:1.首先引入jQuery和colResizable的js文件,colResizable支持表格拖动改变列宽,但基于jQuery,(1)colResizable可以去:http://www.bacubacu.com/colresizable/#rangeSlider下载(2)引入文件:2.编写j
【无标题】
2401_84102689
2024年程序员学习 java
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
风流野趣fly
echarts 信息可视化 前端 vue.js javascript vscode 大数据
可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态显示当前系统日期、星期、时间,格式。在管理端进行添加数据后,数据可视化图表进行相应变化。1.能耗总览仪表盘,统计分析耗电量、耗水量、
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能,vue3 Table表格拖拽排序,表格每行使用鼠标拖动进行排序功能,表格拖拽排序实现(详细示例代码,一键复制开箱即用
街尾杂货店&
前端组件与功能(开箱即用) elementPlus vue3 el-table Table表格拖动时动态排序 表格组件鼠标拖拽排序示例代码 树型tree复杂表格拖曳排序 element表格行可拖动排序
效果图在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,vue3使用elementplus表格组件进行表格每行的拖动换位置排序功能(支持一键开启和关闭鼠标是否可拖动排序,代码易改造灵活),稍加改造可支持【树形复杂表格的排序】!详细示例源代码,复制运行稍微改下就能用了。准备开始首先,
el-table表格序号显示
夏之小星星
vue.js elementui 前端
el-table表格序号显示{{(pageIndex-1)*pageSize+scope.$index+1}}
Spring的注解积累
yijiesuifeng
spring 注解
用注解来向Spring容器注册Bean。
需要在applicationContext.xml中注册:
<context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。
如:在base-package指明一个包
<context:component-sc
传感器
百合不是茶
android 传感器
android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件
下面就以重力传感器为例;
1,在onCreate中获得传感器服务
private SensorManager sm;// 获得系统的服务
private Sensor sensor;// 创建传感器实例
@Override
protected void
[光磁与探测]金吕玉衣的意义
comsci
这是一个古代人的秘密:现在告诉大家
信不信由你们:
穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星
这就是为什么古代
精简的反序打印某个数
沐刃青蛟
打印
以前看到一些让求反序打印某个数的程序。
比如:输入123,输出321。
记得以前是告诉你是几位数的,当时就抓耳挠腮,完全没有思路。
似乎最后是用到%和/方法解决的。
而今突然想到一个简短的方法,就可以实现任意位数的反序打印(但是如果是首位数或者尾位数为0时就没有打印出来了)
代码如下:
long num, num1=0;
PHP:6种方法获取文件的扩展名
IT独行者
PHP 扩展名
PHP:6种方法获取文件的扩展名
1、字符串查找和截取的方法
1
$extension
=
substr
(
strrchr
(
$file
,
'.'
), 1);
2、字符串查找和截取的方法二
1
$extension
=
substr
面试111
文强chu
面试
1事务隔离级别有那些 ,事务特性是什么(问到一次)
2 spring aop 如何管理事务的,如何实现的。动态代理如何实现,jdk怎么实现动态代理的,ioc是怎么实现的,spring是单例还是多例,有那些初始化bean的方式,各有什么区别(经常问)
3 struts默认提供了那些拦截器 (一次)
4 过滤器和拦截器的区别 (频率也挺高)
5 final,finally final
XML的四种解析方式
小桔子
dom jdom dom4j sax
在平时工作中,难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案,哪个最适合我们呢?在这篇文章中,我对这四种主流方案做一个不完全评测,仅仅针对遍历 XML 这块来测试,因为遍历 XML 是工作中使用最多的(至少我认为)。 预 备 测试环境: AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
wordpress中常见的操作
aichenglong
中文注册 wordpress 移除菜单
1 wordpress中使用中文名注册解决办法
1)使用插件
2)修改wp源代码
进入到wp-include/formatting.php文件中找到
function sanitize_user( $username, $strict = false
小飞飞学管理-1
alafqq
管理
项目管理的下午题,其实就在提出问题(挑刺),分析问题,解决问题。
今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。
结合我自己经历写下心得
对于公司选拔和培养项目经理的制度有什么毛病呢?
1,公司考察,选拔项目经理,只关注技术能力,而很少或没有关注管理方面的经验,能力。
2,公司对项目经理缺乏必要的项目管理知识和技能方面的培训。
3,公司对项目经理的工作缺乏进行指
IO输入输出部分探讨
百合不是茶
IO
//文件处理 在处理文件输入输出时要引入java.IO这个包;
/*
1,运用File类对文件目录和属性进行操作
2,理解流,理解输入输出流的概念
3,使用字节/符流对文件进行读/写操作
4,了解标准的I/O
5,了解对象序列化
*/
//1,运用File类对文件目录和属性进行操作
//在工程中线创建一个text.txt
getElementById的用法
bijian1013
element
getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。
返回具有指定ID属性值的第一个对象的一个引用。
语法:
&n
励志经典语录
bijian1013
励志 人生
经典语录1:
哈佛有一个著名的理论:人的差别在于业余时间,而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论,你会发现,你的人生正在发生改变,坚持数年之后,成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息,看就看一些励志的影视或者文章,不要当作消遣;学会思考人生,学会感悟人生
[MongoDB学习笔记三]MongoDB分片
bit1129
mongodb
MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题,另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题,MongoDB作为云计算时代的分布式数据库,大容量数据存储,高效并发的数据存取,自动容错等是MongoDB的关键指标。
本篇介绍MongoDB的切片(Sharding)
1.何时需要分片
&nbs
【Spark八十三】BlockManager在Spark中的使用场景
bit1129
manager
1. Broadcast变量的存储,在HttpBroadcast类中可以知道
2. RDD通过CacheManager存储RDD中的数据,CacheManager也是通过BlockManager进行存储的
3. ShuffleMapTask得到的结果数据,是通过FileShuffleBlockManager进行管理的,而FileShuffleBlockManager最终也是使用BlockMan
yum方式部署zabbix
ronin47
yum方式部署zabbix
安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
Hibernate4和MySQL5.5自动创建表失败问题解决方法
byalias
J2EE Hibernate4
今天初学Hibernate4,了解了使用Hibernate的过程。大体分为4个步骤:
①创建hibernate.cfg.xml文件
②创建持久化对象
③创建*.hbm.xml映射文件
④编写hibernate相应代码
在第四步中,进行了单元测试,测试预期结果是hibernate自动帮助在数据库中创建数据表,结果JUnit单元测试没有问题,在控制台打印了创建数据表的SQL语句,但在数据库中
Netty源码学习-FrameDecoder
bylijinnan
java netty
Netty 3.x的user guide里FrameDecoder的例子,有几个疑问:
1.文档说:FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received.
为什么每次有新数据到达时,都会调用decode方法?
2.Dec
SQL行列转换方法
chicony
行列转换
create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int)
insert into tb values('三星' , '0-5' , 74)
insert into tb values('三星' , '10-15' , 83)
insert into tb values('苹果' , '0-5' , 93)
中文编码测试
ctrain
编码
循环打印转换编码
String[] codes = {
"iso-8859-1",
"utf-8",
"gbk",
"unicode"
};
for (int i = 0; i < codes.length; i++) {
for (int j
hive 客户端查询报堆内存溢出解决方法
daizj
hive 堆内存溢出
hive> select * from t_test where ds=20150323 limit 2;
OK
Exception in thread "main" java.lang.OutOfMemoryError: Java heap space
问题原因: hive堆内存默认为256M
这个问题的解决方法为:
修改/us
人有多大懒,才有多大闲 (评论『卓有成效的程序员』)
dcj3sjt126com
程序员
卓有成效的程序员给我的震撼很大,程序员作为特殊的群体,有的人可以这么懒, 懒到事情都交给机器去做 ,而有的人又可以那么勤奋,每天都孜孜不倦得做着重复单调的工作。
在看这本书之前,我属于勤奋的人,而看完这本书以后,我要努力变成懒惰的人。
不要在去庞大的开始菜单里面一项一项搜索自己的应用程序,也不要在自己的桌面上放置眼花缭乱的快捷图标
Eclipse简单有用的配置
dcj3sjt126com
eclipse
1、显示行号 Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers
2、代码提示字符 Window ->Perferences,并依次展开 Java -> Editor -> Content Assist,最下面一栏 auto-Activation
在tomcat上面安装solr4.8.0全过程
eksliang
Solr solr4.0后的版本安装 solr4.8.0安装
转载请出自出处:
http://eksliang.iteye.com/blog/2096478
首先solr是一个基于java的web的应用,所以安装solr之前必须先安装JDK和tomcat,我这里就先省略安装tomcat和jdk了
第一步:当然是下载去官网上下载最新的solr版本,下载地址
Android APP通用型拒绝服务、漏洞分析报告
gg163
漏洞 android APP 分析
点评:记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞,移动安全团队爱内测(ineice.com)发现了一个安卓客户端的通用型拒绝服务漏洞,来看看他们的详细分析吧。
0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时,发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。
针对序列化对象而出现的拒绝服务主要
HoverTree项目已经实现分层
hvt
编程 .net Web C# ASP.ENT
HoverTree项目已经初步实现分层,源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考:http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目,希望对你学习ASP.NET或者C#语言有帮助,如果你对
Google Maps API v3: Remove Markers 移除标记
天梯梦
google maps api
Simply do the following:
I. Declare a global variable:
var markersArray = [];
II. Define a function:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ )
jQuery选择器总结
lq38366
jquery 选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
基础数据结构和算法六:Quick sort
sunwinner
Algorithm Quicksort
Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作
刘星宇
html Web
今天在写一个flash广告代码的时候,因为flash自带的链接,容易被当成弹出广告,所以做了一个div层放到flash上面,这样链接都是a触发的不会被拦截,但发现flash一直处于div层上面,原来flash需要加个参数才可以。
让flash置于DIV层之下的方法,让flash不挡住飘浮层或下拉菜单,让Flash不档住浮动对象或层的关键参数:wmode=opaque。
方法如下:
Mybatis实用Mapper SQL汇总示例
wdmcygah
sql mysql mybatis 实用
Mybatis作为一个非常好用的持久层框架,相关资料真的是少得可怜,所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法,希望能够对大家有所帮助。
不少持久层框架对动态SQL的支持不足,在SQL需要动态拼接时非常苦恼,而Mybatis很好地解决了这个问题,算是框架的一大亮点。对于常见的场景,例如:批量插入/更新/删除,模糊查询,多条件查询,联表查询,