2. JavaScript
可以在js中定义好数据源,然后在DT初始化的时候,通过data选项为表格配置数据,数据源可以是数组、对象、实例三种形式。
(1)数组
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
];
$('#example').DataTable( {
data: data
} );
(2)实例
function Employee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;
this.office = function () {
return this._office;
}
};
$('#example').DataTable( {
data: [
new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
],
columns: [
{ data: 'name' },
{ data: 'salary' },
{ data: 'office()' },
{ data: 'position' }
]
} );
(3)对象
var data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
];
//object可以如下初始化表格
$('#example').DataTable( {
data: data,
//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );
可以看到,在html中定义好一个id是example的table后,可以使用DT提供的选项进行初始化,data是数据,可以将要展示的数据对象放到data选项后,然后通过columns选项为每一列的属性进行定义,DT就会根据columns中定义的属性找到对象中的成员进行绑定,如果是数组的话,会按照数组中定义的数据依次绑定到每一列上进行展示。
3. Ajax
前两种数据源的处理模式都是客户端处理,显然这不能满足大多数时候对于表格的要求。还好DT提供了一种可以通过Ajax与后端服务交互的方法,可以直接将后端提供的数据直接展示到表格上,分页和排序也很方便。后面的篇幅会侧重说DT如何通过Ajax如何与服务端完成数据交互。
三、通过选项完成一个服务端处理模式的Datatables
datatables中大量的选项可以用来定制你的表格展现给用户。
举个例子
datatables的配置是通过设置你定义的选项来完成的,如下:
$('#example').DataTable( {
paging: false
} );
通过设置paging选项,禁止表格分页(默认是打开的)
假设你要在表格里使用滚动,你需要加上scrollY选项:
$('#example').DataTable( {
scrollY: 400
} );
当然你可以组合多个选项来初始化datatables,启动滚动条,禁用分页
$('#example').DataTable( {
paging: false,
scrollY: 400
} );
再比如在上面说到的data选项和columns选项都是一种初始化定制DT的方法。
可以看到,通过DataTable(object)函数可以进行DT的定制,object是一个对象,对象中的每个成员变量都应该是一个DT的选项。
因为我们在一个项目中可能会用到多个DT,那有些选项其实是通用的,举个例子如果A、B的表格都允许排序并且允许检索,正常会写成:
$('#a).DataTable( {
searching: true,
ordering: true
} );
$('#b).DataTable( {
searching: true,
ordering: true
} );
当使用的表格多了后,后续维护会非常的麻烦,所以可以将通用的选项提取出来,然后再通用选项的基础上定制每个DT。
function getCommonOptions()
{
var options = new Object();
options.searching = true;
options.ordering = true;
return options;
}
var aOptions = getCommonOptions();
aOptions.scrollY = true;
$('#a).DataTable(aOptions);
var bOptions = getCommonOptions();
bOptions .scrollY = false;
$('#b).DataTable(bOptions);
这样,A和B都支持了检索和排序,但是A支持垂直滚动,但是B不支持垂直滚动。
所以首先可以看下一个公用的通过Ajax获取后端数据的DT是如何配置的。
/**通用列表**/
function createCommonTableOptions() {
var oTemp = new Object;
// 是否允许检索
oTemp.searching = true;
// 是否允许排序
oTemp.ordering = true;
// 默认排序
oTemp.order = [[1,'desc']];
// 是否显示情报 就是"当前显示1/100记录"这个信息
oTemp.info = true;
// 是否允许翻页,设成false,翻页按钮不显示
oTemp.paging = true;
// 水平滚动条
oTemp.scrollX = false;
// 垂直滚动条
oTemp.scrollY = true;
// 是否可以选择每页展示的Item数量
oTemp.lengthChange = true;
// 选择每页展示数量的选项
oTemp.lengthMenu = [10, 25, 50, 75, 100];
// 每页展示数据条数默认值
oTemp.pageLength = 10;
//翻页按钮样式
// numbers:数字
// simple:前一页,后一页
// simple_numbers:前一页,后一页,数字
// full:第一页,前一页,后一页,最后页
//full_numbers:第一页,前一页,后一页,最后页,数字
//first_last_numbers:第一页,最后页,数字
oTemp.pagingType = "simple_numbers";
// 行样式应用 指定多个的话,第一行tr的class为strip1,第二行为strip2,第三行为strip3.
// 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状,这里的class必须指定为2个。
oTemp.stripeClasses = ['line_1', 'line_2'];
// 自动列宽
oTemp.autoWidth = true;
// 是否表示 "processing" 加载中的信息,这个信息可以修改
oTemp.processing = true;
// 每次创建是否销毁以前的DataTable,默认false
oTemp.destroy = false;
// 控制表格各种信息的表示位置(比较复杂) 默认:lfrtip
// 具体参考:https://datatables.net/reference/option/dom
oTemp.dom = "lrtip";
// language 用来定义展示信息的内容,如加载中显示的提示、当前页显示多少条时的提示、翻页按钮上的文字等等
oTemp.language = {
"processing": "翻页中。。。。",
// 当前页显示多少条
"lengthMenu": "当前显示 _MENU_ 条记录",
// _START_(当前页的第一条的序号) ,_END_(当前页的最后一条的序号),_TOTAL_(筛选后的总件数),
// _MAX_(总件数),_PAGE_(当前页号),_PAGES_(总页数)
"info": "当前第 _PAGE_ 页, 共 _PAGES_ 页, 共 _MAX_ 条数据",
"infoEmpty": "0条数据",
"infoFiltered": "",
// 没有数据的显示(可选),如果没指定,会用zeroRecords的内容
"emptyTable": "没有记录",
// 筛选后,没有数据的表示信息,注意emptyTable优先级更高
"zeroRecords": "没有符合条件的记录",
// 千分位的符号,只对显示有效,默认就是"," 一般不要改写
//"thousands": "'",
// 小数点位的符号,对输入解析有影响,默认就是"." 一般不要改写
//"decimal": "-",
// 翻页按钮文字控制
"paginate": {
"first": "第一页",
"last": "最后一页",
"next": "上一页",
"previous": "下一页"
},
"loadingRecords": "正在加载中,请稍后。。。"
};
// 默认是false
// 如果设为true,将只渲染当前也的html,速度会很快,但是通过API就访问不到所有页的数据,有利有弊
//"deferRender": false,
// 服务器端处理方式
oTemp.serverSide = true;
return oTemp;
}
每行选项都加了注释,如果希望了解更详细,可以参考官方的用户手册。注意serverSide一定要设置为true。
一个项目中的多个表最大的不同是啥呢?首先,肯定是他们的列不同,如果列相同的话就成了相同的表格了。其次,因为列不同,所以需要绑定的数据以及数据的接口肯定也不同。
通过一个具体的例子看一下。我要实现一个功能,手机通过定时轮询的方法查看服务端向他发送的命令(比如让手机上报自己的定位、上传自己的通话记录等)。那这个服务端向手机发送的命令,我需要一个后台管理平台进行管理,其中一个表格就是要展示所有的命令,包括命令内容、创建时间和执行时间等。
首先看下官方给出的前端通过Ajax向后端服务传递的入参格式:
名称
类型
描述
draw
integerJS
绘制计数器。这个是用来确保Ajax从服务器返回的是对应的(Ajax是异步的,因此返回的顺序是不确定的)。 要求在服务器接收到此参数后再返回(具体看 下面)
start
integerJS
第一条数据的起始位置,比如0代表第一条数据
length
integerJS
告诉服务器每页显示的条数,这个数字会等于返回的 data集合的记录数,可能会大于因为服务器可能没有那么多数据。这个也可能是-1,代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)
search[value]
stringJS
全局的搜索条件,条件会应用到每一列( searchable需要设置为 true )
search[regex]
booleanJS
如果为 true代表全局搜索的值是作为正则表达式处理,为 false则不是。 注意:通常在服务器模式下对于大数据不执行这样的正则表达式,但这都是自己决定的
order[i][column]
integerJS
告诉后台那些列是需要排序的。 i是一个数组索引,对应的是 columns配置的数组,从0开始
order[i][dir]
stringJS
告诉后台列排序的方式, desc 降序 asc升序
columns[i][data]
stringJS
columns 绑定的数据源,由 columns.dataOption 定义。
columns[i][name]
stringJS
columns 的名字,由 columns.nameOption 定义。
columns[i][searchable]
booleanJS
标记列是否能被搜索,为true代表可以,否则不可以,这个是由 columns.searchableOption 控制
columns[i][orderable]
booleanJS
标记列是否能排序,为 true代表可以,否则不可以,这个是由 columns.orderableOption 控制
columns[i][search][value]
stringJS
标记具体列的搜索条件
columns[i][search][regex]
booleanJS
特定列的搜索条件是否视为正则表达式, 如果为 true代表搜索的值是作为正则表达式处理,为 false则不是。 注意:通常在服务器模式下对于大数据不执行这样的正则表达式,但这都是自己决定的
这个param是由DT自己生成的,我们也可以自己增加一些我们想添加的入参数据。先看一下这个DT自己生成的参数在调试过程中抓取的结构:
感觉有点复杂,其实我们自己开发后端时候所需要的查询条件并没有那么复杂,所以在后端接受的时候可以简化一下
package com.springapp.mvc.params;
/**
* Created by qinyy on 2018/8/14.
*/
public class OperationQueryParam
{
private int draw;
// 分页查询起始下标
private int start;
// 分页查询偏移量--- 既每页展示的数据数量
private int offset;
// 排序属性
private String sortPro;
// 排序方式 0 asc 1 desc
private int sortType;
public String getSortPro()
{
return sortPro;
}
public void setSortPro(String sortPro)
{
this.sortPro = sortPro;
}
public int getSortType()
{
return sortType;
}
public void setSortType(int sortType)
{
this.sortType = sortType;
}
public int getStart()
{
return start;
}
public void setStart(int start)
{
this.start = start;
}
public int getOffset()
{
return offset;
}
public void setOffset(int offset)
{
this.offset = offset;
}
public int getDraw() {
return draw;
}
public void setDraw(int draw) {
this.draw = draw;
}
}
我只接受这些字段就好了,就可以完成查询了,draw这个字段其实就是一个标识,因为查询是异步的,所以需要在服务端查询好数据后把这个标识原封不动的返回给DT,使DT可以将请求和响应的处理对应起来。
我在服务端需要接受的东西有些是DT不会自动生成的,那么如何添加这些我们自己觉得有用的字段呢?一会儿说完出参格式的时候会把代码贴出来进行说明。
再看一下官方给出的出参的说明
名称
类型
描述
draw
integerJS
必要。上面提到了,Datatables发送的draw是多少那么服务器就返回多少。 这里注意,作者出于安全的考虑,强烈要求把这个转换为整形,即数字后再返回,而不是纯粹的接受然后返回,这是 为了防止跨站脚本(XSS)攻击。
recordsTotal
integerJS
必要。即没有过滤的记录数(数据库里总共记录数)
recordsFiltered
integerJS
必要。过滤后的记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数)
data
arrayType
必要。表中中需要显示的数据。这是一个对象数组,也可以只是数组,区别在于 纯数组前台就不需要用 columns绑定数据,会自动按照顺序去显示 ,而对象数组则需要使用 columns绑定数据才能正常显示。 注意这个 data的名称可以由 ajaxOption ajax不定时一讲 的 ajax.dataSrcOption ajax.dataSrc 1不定时一讲 ajax.dataSrc 2不定时一讲 控制
error
stringJS
可选。你可以定义一个错误来描述服务器出了问题后的友好提示
除了上面的返回参数以外你还可以加入下面的参数,来实现对表格数据的自动绑定
名称
类型
描述
DT_RowId
stringJS
自动绑定到 tr节点上
DT_RowClass
stringJS
自动把这个类名添加到 tr
DT_RowData
objectJS
使用 jQuery.data() 方法把数据绑定到row中,方便之后用来检索(比如加入一个点击事件)
DT_RowAttr
objectJS
自动绑定数据到 tr上,使用 jQuery.attr() 方法,对象的键用作属性,值用作属性的值。注意这个 需要 Datatables 1.10.5+的版本才支持
其实除了data这个字段以外,其他的信息都是交给DT自己控制的,比如说recordsTotal,我们在后端查询出所有记录的数量后,把这个值置好,那么DT收到后就会在这里显示出这个记录的数量。然后我们可以截取data这个列表,进行进一步的绑定处理。
看下服务端定义的出参的格式:
public class CommonDatatableBean
{
private int draw;
private int recordsTotal;
private int recordsFiltered;
private List data;
public int getDraw()
{
return draw;
}
public void setDraw(int draw)
{
this.draw = draw;
}
public int getRecordsTotal()
{
return recordsTotal;
}
public void setRecordsTotal(int recordsTotal)
{
this.recordsTotal = recordsTotal;
}
public int getRecordsFiltered()
{
return recordsFiltered;
}
public void setRecordsFiltered(int recordsFiltered)
{
this.recordsFiltered = recordsFiltered;
}
public List getData()
{
return data;
}
public void setData(List data)
{
this.data = data;
}
}
可以看到这是一个通用的格式,所有的表格数据都可以封装在这个对象中返回,区别就是data中Object类型不同而已。
入参和出参格式说完了,可以看一下DT如何设置ajax请求后端的数据
var operationTableOption = createCommonTableOptions();
operationTableOption.ajax = {
// url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action
url: "/operation/query",
type: 'POST',
// 异步调用
async:true,
// 传给服务器的数据,可以添加我们自己的查询参数
data: function (param)
{
param.start = param.start;
param.offset = param.length;
switch (param.order[0].column)
{
case 1:
param.sortPro = "createtime";
break;
case 2:
param.sortPro = "excutetime";
break;
}
if("asc" == param.order[0].dir)
{
param.sortType = 0;
}
else if("desc" == param.order[0].dir)
{
param.sortType = 1;
}
return param;
},
//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
dataFilter: function (myJson)
{
var result = JSON.parse(myJson);
var retStr = JSON.stringify(result.data);
return retStr;
}
};
首先,通过通用配置选项的函数获取了一个通用选项的对象operationTableOption,然后为operationTableOption设置ajax选项。
首先设置请求地址,因为ajax正常情况下是不能跨域的,所以直线后面的path就可以,然后指定请求类型为POST。设置为异步请求。定义一个拦截请求的方法设置到data属性中,这样就可以完成自己请求的定制了。
这个请求主要就是根据要排序列的序号,给服务端传递排序字段的名称以及排序方式,这样服务端就可以不用了解DT入参的数据格式,而根据接口文档开发就行了。
最后有个dataFilter属性,这里要定义一个方法拦截服务端给前端返回的json数据,将json中的data数据列表(上面说出参格式的时候提到过)给剥离出来并返回,这样一会儿定义列数据绑定的时候就可以直接使用这个列表了。
ajax选项定义完毕,下一步要定义列相关的选项,定义列可以使用 columns 和 columnDefs这两个选项都可以用来定义列,首先,这两个选项中都要放入一个Definition Object的数组,区别就是columns需要对所有的列进行定义,也就是说这个表的每一个列都要和选项中放的DeinitionObject的一个子元素对应行程映射,columnDefs可以使用target来指定某一个定义对象应用到某一列,或者某一个定义对象是全局生效的,而且允许对同一个列进行多次定义。
为了使定义更清晰、更好理解、更方便维护,我一般都是使用columns进行定义。
operationTableOption.columns = [
{ "data": "operationid","orderable": false },
{ "data": "createtime" ,
"orderable": true,
"render": function ( data, type, row, meta )
{
if(data > 0)
return $.myTime.UnixToDate(data,true)
else
return ""
}
},
{ "data": "excutetime" ,
"orderable": true,
"render": function ( data, type, row, meta )
{
if(data > 0)
return $.myTime.UnixToDate(data,true)
else
return ""
}},
{ "data": "needuploadlocation","orderable": false,
"render": function ( data, type, row, meta )
{
if(data)
{
return "是";
}
else
{
return "否";
}
}
},
{ "data": "recordsbegindate","orderable": false },
{ "data": "recordsenddate" ,"orderable": false},
{ "data": "uploadsoundsids","orderable": false },
{"render":function ( data, type, row, meta )
{
var operationId = row.operationid;
return "删除 ";
}}
];
可以看到,将后端给前端返回的出参,使用属性名依次绑定到列上,orderatble是说明这一列是否支持排序。render可以定义一个function也可以定义成其他属性,是用来转换数据的,比如返回的时间是一个时间戳,但是我要现实的是一个fomat的时间,就可以在render中转换。还有最后一行,我想在最后一列添加一个删除按钮,那这个删除按钮就可在这里通过数据的唯一索引来动态生成。
看下官方对render中使用function定义的说明:
function render( data, type, row, meta )
Description:
If a function is given, it will be executed whenever DataTables needs to get the data for a cell in the column. Note that this function might be called multiple times, as DataTables will call it for the different data types that it needs - sorting, filtering and display.
Parameters:
Name
Type
Optional
1
data
Any
No
The data for the cell (based on columns.data)
2
type
string
No
The type call data requested. This is used for DataTables' orthogonal data support. This value will be one of:
filter: Get the value that DataTables should use for filtering on this cell.
display: The value to display in the table.
type: Value to use for type detection. This should normally match the sort value - see type detection plug-in documentation.
sort: Get the data to use for sorting on this cell - the value returned should typically be numeric or a string, but custom plug-ins can be used - see the plug-in documentation. Note that this value is sort for legacy reasons (rather than being order which would be more consistent with the rest of the API).
undefined: Get the original data for the cell (i.e. unmodified).
Custom value: It is possible for plug-ins such as Responsive (through its responsive.orthogonal option) and Buttons (buttons.exportData()) to request custom data types specified by the developer. This can be useful in cases where you want send certain data to a particular extension.
See also the cell().render() method which can be used to execute the given rendering method at any arbitrary time.
3
row
Any
No
The full data source for the row (not based on columns.data)
4
meta
object
No
Since 1.10.1: An object that contains additional information about the cell being requested. This object contains the following properties:
row - The row index for the requested cell. See row().index().
col - The column index for the requested cell. See column().index().
settings - The DataTables.Settings object for the table in question. This can be used to obtain an API instance if required.
对ajax和columns都设置好以后,就可以将整个选项对象绑定到DT中了
$("table.operation-table").DataTable(operationTableOption);
四、服务端支持
@ResponseBody
@RequestMapping(method = RequestMethod.POST,value = "query")
public BaseResult queryOperation(OperationQueryParam param)
{
if(param == null)
return null;
BaseResult result = new BaseResult();
CommonDatatableBean tableBean = new CommonDatatableBean();
tableBean.setDraw(param.getDraw());
int totalAmount = mOperationService.getOperationCount();
tableBean.setRecordsTotal(totalAmount);
tableBean.setRecordsFiltered(totalAmount);
int limit = param.getStart();
List list = new ArrayList();
String sortType = param.getSortType() == 0?"ASC":"DESC";
List operations = mOperationService.queryOperationPaged(limit,param.getOffset(),param.getSortPro(),sortType);
if(operations != null && operations.size() > 0)
{
for(Operation operation:operations)
{
list.add(operation);
}
}
tableBean.setData(list);
result.setData(tableBean);
result.setResult(ResultCode.SUCCESS);
return result;
}
好了这篇文章就介绍到这了,更多内容可以查看脚本之家以前发布的文章。
你可能感兴趣的:(Jquery Datatables的使用详解)
python在abaqus中的应用_Python在ABAQUS中的使用【z】
weixin_39835925
【篇首语】首先说,我不懂abaqus。只是一次帮同学处理混合编程问题查到这些资料,借机贴过来。拷贝过程中有些混乱字符,时间关系我没有删干净。因为我也是从转帖转过来,原出处找不到了。#开头的为注释行.9_-m2r;n%h-G第一节,建立建模环境,这一步中py将从abaqus中导入建模所需的所有程序模块frompartimport*接下来定义草图环境mdb.models['Model-1'].Sket
Python 魔法学院 - 第03篇:Python 变量与数据类型 ⭐
码力全開
《Python 魔法学院》 python 开发语言 windows pycharm
目录1.引言:开启Python变量与数据类型的魔法之旅2.变量:数据的魔法标签️2.1什么是变量?2.2变量的命名规则3.数据类型:Python的魔法工具箱3.1数据类型示例3.2数据类型的内存结构内存结构模拟4.Python中的关键字和保留字5.Python可变类型及其方法详解️5.1列表(List)5.1.1列表的创建5.1.2列表的常用方法5.1.3列表方法的使用示例及内存模拟5.2集合(S
通义千问 Qwen2-VL-2B:技术架构、核心原理、微调操作与场景应用详解
zhangjiaofa
大模型 通义千问 大模型 多模态 模型微调
通义千问Qwen2-VL-2B:技术架构、核心原理、微调操作与场景应用详解引言近年来,多模态大模型在人工智能领域取得了显著进展,尤其是在视觉语言理解(Vision-LanguageUnderstanding,VL)方面。阿里云通义千问团队推出的Qwen2-VL-2B模型,作为Qwen2-VL系列中的轻量级版本,凭借其高效的计算性能和强大的多模态处理能力,成为开源社区和工业界关注的焦点。本文将深入解
【C++】设计模式详解:单例模式
利刃大大
C++ c++ 设计模式 单例模式
文章目录Ⅰ.设计一个类,不允许被拷贝Ⅱ.请设计一个类,只能在堆上创建对象Ⅲ.请设计一个类,只能在栈上创建对象Ⅳ.请设计一个类,不能被继承Ⅴ.请设计一个类,只能创建一个对象(单例模式)单例模式:1、饿汉模式2、懒汉模式第一种写法:第二种写法:Ⅰ.设计一个类,不允许被拷贝拷贝只会发生在两个场景中:拷贝构造函数、赋值运算符重载,因此想要让一个类禁止拷贝,只需让该类不能调用拷贝构造函数以及赋值运算符重载即
python 中serial.read用法详解之serial.read(inwaiting or 1)
huiyuanzhenduo
python
在Python中,serial.read(inwaitingor1)是pyserial库中用于从串口读取数据的代码片段,下面是详细解释:read()serial类的方法,用于从串口缓冲区读取指定数量的字节数据。格式为read(size),size为读取的字节数。inwaiting是serial类的属性,返回串口输入缓冲区中等待读取的字节数。如ser.inwaiting()可获取当前缓冲区字节数。i
uniapp - [全端兼容] 实现精美Editor富文本编辑器功能,uniApp全平台兼容的富文本插件组件用户可上传图片及对接服务器存储文件等,手机移动端H5网页富文本/小程序富文本/App富文本!
王二红
+ UniApp uni-app 富文本 使用富文本编辑器插入图片图像 uni-app微信小程序富文本 uniapp网页h5端富文本 uniap安卓苹果app富文本 富文本上传图片及服务器保存
前言网上的教程乱七八糟且兼容性太差,本文提供优质示例。在uni-app全平台兼容(H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue)开发中,详解引入使用富文本编辑器及图片上传显示等功能,用户可上传图片显示和服务器保存回显效果(插入图片),uniApp各平台都兼容的富文本editor插件,自定义富文本按钮功能及自由排版样式布局,uniapp富文本组件插件用于发布文章/发布资讯公告/
uniapp 底部菜单_uniapp 实现底部导航栏 - tabBar的使用方法
解压猫咖研究所
uniapp 底部菜单
开发环境:HbuilderXtabBar参数说明color:导航栏字体颜色selectedColor:选中后字体的颜色backgroundColor:底部背景颜色borderStyle:底部的border颜色,只能是“black”或者“white”list:对象,包含以下这些选项{pagePath:页面路径text:底部导航文字iconPath:没选中前的图标路径selectedIconPath:
小程序webview打开小程序原生页面_详解如何探测小程序返回到webview页面
weixin_39905624
在公司项目中经常会遇到一个场景,尝试过各种不同的方法,最后想到了一种很技术上简单且可行的方法.经常被QA同学反应同一类型的问题项目是小程序(wepy),部分页面使用webview(vue).经常会遇见一个场景:当小程序navigateTo到一些页面对用户的"收藏状态","身材细节"做了修改后,用户点击返回按钮回到上一个页面,收藏的状态或是身材细节没有改变.那是当然的,作为一个小程序中的webvie
Java并发编程,AQS详解
图苑
java 开发语言 jvm
AbstractQueuedSynchronizer(简称AQS)是Java并发包中一个非常重要的同步框架,它为实现锁和其他同步器提供了一种标准化的方法。AQS通过内部的状态管理、FIFO队列以及对线程调度的支持,简化了锁的实现过程。许多标准库中的同步工具(如ReentrantLock、Semaphore和CountDownLatch)都是基于AQS实现的。一、AQS的基本原理1.概念AQS是一个
【Uniapp-Vue3】request各种不同类型的参数详解
永久旅途
Uniapp uni-app 前端
一、参数携带我们调用该接口的时候需要传入type参数。第一种路径名称?参数名1=参数值1&参数名2=参数值2第二种uni.request({url:"请求路径",data:{参数名:参数值}})二、请求方式常用的有get,post和put三种,默认是get请求。uni.request({url:"请求路径",method:"方式"})三、请求头配置uni.request({url:"请求路径",h
Python SQLAlchemy库详解
寒秋丶
Python python 开发语言 数据库 测试开发 软件测试 软件开发 自动化测试
大家好,在Python生态系统中,SQLAlchemy库是一个强大的工具,为开发人员提供了便捷的方式来处理与数据库的交互。无论是开发一个小型的Web应用程序,还是构建一个大型的企业级系统,SQLAlchemy都能满足你的需求,并提供灵活性和性能上的优势。本文将带你深入探索SQLAlchemy库,从基础概念到高级用法,让你对其有一个全面的了解。一、介绍SQLAlchemy是Python中一个强大的开
Flask教程5:flask数据库SQLAlchemy
Cachel wood
Flask入门教程 数据库 flask oracle python 阿里云 开发语言 LLM
文章目录SQLAlchemy为什么使用ORM初始化数据库配置表模型的定义与数据库映射数据的增、删、改、查操作数据的添加数据的查找数据的修改数据的删除init_app作用详解SQLAlchemySQLAlchemy是一个基于Python实现的ORM(ObjectRelationalMapping,对象关系映射)框架。该框架建立在DBAPI(数据库应用程序接口系统)之上,使用关系对象映射进行数据库操作
Jquery.Uploadify 图片上传使用
寒冰碧海
Controller@Value("${file.path}")privateStringfilePath;@RequestMapping(value="/uploadImage")@ResponseBodypublicStringuploadImage(MultipartFileimg){StringfileName=UploadUtil.upload(img,filePath);returnf
浅谈——Linux命令入门之前奏
小峰编程
Linux 学习方法 笔记 运维 linux 服务器 centos
目录一、备份操作系统1、快照2、克隆二、操作系统的使用注意1、Linux严格区分大小写2、Linux文件“扩展名”3、Linux中所有的内容以文件的形式进行保存4、Linux中所有的存储设备都必须挂载之后才能使用5、Linux系统文件目录的结构6、Linux系统文件的目录用途好了,今日的分享就到这里,后期会持续更新……如有错误,还望指出!一、备份操作系统VMware中的备份方式有两种:快照或者克隆
python【数据结构与算法】最长公共子串详解(附代码)
理想不闪火
算法
文章目录1定义1定义和最长公共子序列一样,使用动态规划的算法。下一步就要找到状态之间的转换方程。和LCS问题唯一不同的地方在于当A[i]!=B[j]时,res[i][j]就直接等于0了,因为子串必须连续,且res[i
C/C++ 已排序的链表中删除重复项算法详解及源码
猿来如此yyy
C/C++算法详解及源码 算法 c语言 c++ 计算机视觉 排序算法 数据结构 链表
已排序的链表中删除重复项的算法可以通过遍历链表的方式实现。具体步骤如下:初始化一个指针cur,指向链表的头节点。遍历链表,如果当前节点的值和下一个节点的值相同,则删除下一个节点,并将当前节点的next指针指向下一个节点的next指针,即将当前节点与下一个节点的重复项跳过。如果当前节点的值和下一个节点的值不同,则将指针cur指向下一个节点。优点:时间复杂度为O(n),其中n为链表的长度,算法只需要一
Electron 框架详解与最新动态
海豹工匠
electron javascript 前端
什么是Electron?Electron是由GitHub开发并维护的一个开源框架,旨在使用Web技术(如HTML、CSS和JavaScript)来构建跨平台的桌面应用程序。它嵌入了Chromium和Node.js,使开发者能够使用这些Web技术在桌面环境中构建应用。Electron的核心优势在于其跨平台兼容性,允许开发者编写一次代码,运行在Windows、macOS和Linux平台上。常见的基于E
java爬虫工具Jsoup学习
Future_yzx
java 爬虫 学习
目录前言一、基本使用二、爬取豆瓣电影的案例三、Jsoup能做什么?四、Jsoup相关概念五、Jsoup获取文档六、定位选择元素七、获取数据八、具体案例前言JSoup是一个用于处理HTML的Java库,它提供了一个非常方便类似于使用DOM,CSS和jquery的方法的API来提取和操作数据。一、基本使用org.jsoupjsoup1.13.1二、爬取豆瓣电影的案例publicclassDouBan{
数据库性能优化(sql优化)_索引详解04_深入理解B+树_yxy)
yxy___
数据库 性能优化 sql
数据库性能优化_深入理解B+树1通过代码方式解释B+树1.1查找操作1.2插入操作1.3删除操作1.4更新操作2组合索引的查找逻辑2.1等值查找2.1范围查找1通过代码方式解释B+树B树索引在增删改操作时,底层结构会发生相应的变化,以保持树的平衡和有序性。下面通过简单的伪代码来讲解增删改查时,B+树的底层结构变化(目的是为了让大家深入理解B+树)1.1查找操作思路:1.从根节点开始查找。2.对于每
数据库性能优化(sql优化)_SQL执行计划01_yxy
yxy___
数据库 性能优化 sql
数据库性能优化_SQL执行计划详解011执行计划简介1.1什么是sql执行计划?1.2执行计划解决了什么问题?1.3总结2执行计划的查看方式3执行计划完整示例4执行计划组成部份1执行计划简介1.1什么是sql执行计划?执行计划(ExecutionPlan),也称为查询计划或解释计划,是数据库在执行一个查询语句(如SQL查询)之前制定的详细步骤指南,包括使用哪些索引、连接顺序、操作顺序等信息。是一条
【elasticsearch】reindex 操作将索引的数据复制到另一个索引
infiniteWei
elasticsearch elasticsearch 搜索引擎
在Elasticsearch中,reindex操作用于将一个索引的数据复制到另一个索引。常用的reindex命令有很多细节,下面是一些常见用法和命令详解:基本命令基础Reindex命令POST/_reindex{"source":{"index":"source_index"},"dest":{"index":"destination_index"}}source:需要复制数据的源索引。dest:
ESP32内存管理详解:从基础到进阶
又吹风_Bassy
ESP32 内存管理 PSRAM DRAM FLASH
最近在学习ESP32,下面整理了一些存储和内存相关知识点。ESP32作为一款功能强大的物联网芯片,广泛应用于各种嵌入式开发场景。有效管理ESP32的内存资源,对于提升应用性能和系统稳定性至关重要。本文将系统性地介绍ESP32的内存架构、存储硬件知识、内存分配机制、常见内存问题及解决方案,帮助新手开发者全面掌握ESP32的内存管理。一、内存系统概览1.1ESP32内存架构ESP32的内存架构复杂而灵
色度采样(4:4:4、4:2:2、4:2:0、4:1:1)详解
又吹风_Bassy
视频压缩技术 图像处理 色度采样 YUV颜色空间 视频编码标准
色度采样(4:4:4、4:2:2、4:2:0、4:1:1)详解色度采样概述色度采样(ChromaSubsampling)是一种在图像和视频处理中,通过减少色度分量(U、V)的采样量来压缩数据的技术。它利用了人眼对亮度(Luma,Y)比色度(Chroma,U/V)更加敏感的特性,从而在不明显影响视觉效果的前提下,显著降低数据量。在YUV颜色空间中,Y表示亮度,U和V表示色度分量。通过减少U和V的采样
MyBatis技术详解与实战
小码快撩
mybatis java 开发语言
引言MyBatis是一款优秀的Java持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集的工作,使开发者能更专注于对业务逻辑的实现。本文将详细介绍MyBatis的核心概念,并通过示例代码进行深入讲解。一、配置文件MyBatis配置文件(通常命名为mybatis-config.xml)是MyBatis框架的核心配置文件,它定义
深入解析ncnn::Net类——高效部署神经网络的核心组件
又吹风_Bassy
人工智能 深度学习 ncnn ncnn Net ncnn使用示例
最近在学习ncnn推理框架,下面整理了ncnn::Net的使用方法。在移动端和嵌入式设备上进行高效的神经网络推理,要求框架具备轻量化、高性能以及灵活的扩展能力。作为腾讯开源的高性能神经网络推理框架,ncnn在这些方面表现出色。而在ncnn的核心组件中,ncnn::Net类扮演了至关重要的角色。本文将详细介绍ncnn::Net类的结构、功能及其使用方法,帮助开发者更好地理解和利用这一强大的工具。目录
控制webview_flutter导航条返回键行为
jocchoc
Flutter flutter webview_flutter 路由
作为一名web开发人员,也按耐不住来蹭一波flutter的热度。项目中要求用flutter嵌套web,此处采用webview_flutter插件【官方文档】。插件的使用方法不做赘述。此处分享:如何控制内嵌web的返回键行为,返回web上一路由or退出webview?1.自制导航条由于webview_flutter没有封装导航条,首先我们需要自制一个带有返回箭头的导航条。returnnewScaff
滚雪球学Oracle[1.2讲]:Oracle数据库架构基础
bug菌¹
# 滚雪球学Oracle oracle 数据库架构 数据库
全文目录:前言一、Oracle数据库的物理存储结构详解1.1数据文件的组成与管理数据文件的主要特点:实际操作案例:添加数据文件数据文件管理的优化策略:1.2控制文件的作用与保护策略控制文件的主要作用:控制文件的保护策略:1.3重做日志文件的配置与优化重做日志文件的主要作用:重做日志文件的配置:实际操作案例:查看当前的重做日志组状态二、Oracle数据库的逻辑存储结构详解2.1表空间的类型与管理表空
02-硬件入门学习/嵌入式教程-Type-C使用教程
坏柠
零基础DIY 学习 c语言 开发语言
一、前言今天,我们将一起探索Type-C的基础知识及其在实际应用中的使用。无论你是电子爱好者还是刚刚接触嵌入式系统的朋友都能一定的帮助;。二、Type-C接口简介Type-C是一种新型的USB接口标准,由USBImplementersForum(USBIF)于2014年推出。它以其可逆插的设计、更高的数据传输速度和更强的电力传输能力而著称。Type-C接口不仅适用于智能手机、平板电脑等移动设备,也
python中全局变量和局部变量详解_Python局部变量与全局变量区别原理解析
weixin_39998795
1、局部变量name="YangLi"defchange_name(name):print("beforechange:",name)name="你好"print("afterchange",name)change_name(name)print("在外面看看name改了么?",name)输出:beforechange:YangLiafterchange你好在外面看看name改了么?YangLi2
python中全局变量的使用
weixin_33737774
python
python中在module定义的变量可以认为是全局变量,而对于全局变量的赋值有个地方需要注意。test.py--------------------------------------------------importsysusername="muzizongheng"password="xxxx"defLogin(u,p):username=upassword=pprint("usernam
PHP,安卓,UI,java,linux视频教程合集
cocos2d-x小菜
java UI linux PHP android
╔-----------------------------------╗┆
zookeeper admin 笔记
braveCS
zookeeper
Required Software
1) JDK>=1.6
2)推荐使用ensemble的ZooKeeper(至少3台),并run on separate machines
3)在Yahoo!,zk配置在特定的RHEL boxes里,2个cpu,2G内存,80G硬盘
数据和日志目录
1)数据目录里的文件是zk节点的持久化备份,包括快照和事务日
Spring配置多个连接池
easterfly
spring
项目中需要同时连接多个数据库的时候,如何才能在需要用到哪个数据库就连接哪个数据库呢?
Spring中有关于dataSource的配置:
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"
&nb
Mysql
171815164
mysql
例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话。
GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI
TH GRANT OPTION;
如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器,并使用mypassword作
CommonDAO(公共/基础DAO)
g21121
DAO
好久没有更新博客了,最近一段时间工作比较忙,所以请见谅,无论你是爱看呢还是爱看呢还是爱看呢,总之或许对你有些帮助。
DAO(Data Access Object)是一个数据访问(顾名思义就是与数据库打交道)接口,DAO一般在业
直言有讳
永夜-极光
感悟 随笔
1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313
精华:
“直言有讳”是阿里巴巴提倡的一种观念,而我在此之前并没有很深刻的认识。为什么呢?就好比是读书时候做阅读理解,我喜欢我自己的解读,并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重,我觉得阿里巴巴很多价值观其实是基本的做人
安装CentOS 7 和Win 7后,Win7 引导丢失
随便小屋
centos
一般安装双系统的顺序是先装Win7,然后在安装CentOS,这样CentOS可以引导WIN 7启动。但安装CentOS7后,却找不到Win7 的引导,稍微修改一点东西即可。
一、首先具有root 的权限。
即进入Terminal后输入命令su,然后输入密码即可
二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改
v
Oracle备份与恢复案例
aijuans
oracle
Oracle备份与恢复案例
一. 理解什么是数据库恢复当我们使用一个数据库时,总希望数据库的内容是可靠的、正确的,但由于计算机系统的故障(硬件故障、软件故障、网络故障、进程故障和系统故障)影响数据库系统的操作,影响数据库中数据的正确性,甚至破坏数据库,使数据库中全部或部分数据丢失。因此当发生上述故障后,希望能重构这个完整的数据库,该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
JavaEE开源快速开发平台G4Studio v5.0发布
無為子
我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。
访问G4Studio网站
http://www.g4it.org
2013-04-06 发布G4Studio_V5.0版本
功能新增
(1). 新增了调用Oracle存储过程返回游标,并将游标映射为Java List集合对象的标
Oracle显示根据高考分数模拟录取
百合不是茶
PL/SQL编程 oracle例子 模拟高考录取 学习交流
题目要求:
1,创建student表和result表
2,pl/sql对学生的成绩数据进行处理
3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选
1,创建student表,和result表
学生信息表;
create table student(
student_id number primary key,--学生id
优秀的领导与差劲的领导
bijian1013
领导 管理 团队
责任
优秀的领导:优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了,那么他知道该受责备的人是他自己,并且敢于承认错误。
差劲的领导:差劲的领导觉得这不是他的问题,因此他会想方设法证明是他的团队不行,或是将责任归咎于团队中他不喜欢的那几个成员身上。
努力工作
优秀的领导:团队领导应该是团队成员的榜样。至少,他应该与团队中的其他成员一样努力工作。这仅仅因为他
js函数在浏览器下的兼容
Bill_chen
jquery 浏览器 IE DWR ext
做前端开发的工程师,少不了要用FF进行测试,纯js函数在不同浏览器下,名称也可能不同。对于IE6和FF,取得下一结点的函数就不尽相同:
IE6:node.nextSibling,对于FF是不能识别的;
FF:node.nextElementSibling,对于IE是不能识别的;
兼容解决方式:var Div = node.nextSibl
【JVM四】老年代垃圾回收:吞吐量垃圾收集器(Throughput GC)
bit1129
垃圾回收
吞吐量与用户线程暂停时间
衡量垃圾回收算法优劣的指标有两个:
吞吐量越高,则算法越好
暂停时间越短,则算法越好
首先说明吞吐量和暂停时间的含义。
垃圾回收时,JVM会启动几个特定的GC线程来完成垃圾回收的任务,这些GC线程与应用的用户线程产生竞争关系,共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值,因此,好的GC应该占
J2EE监听器和过滤器基础
白糖_
J2EE
Servlet程序由Servlet,Filter和Listener组成,其中监听器用来监听Servlet容器上下文。
监听器通常分三类:基于Servlet上下文的ServletContex监听,基于会话的HttpSession监听和基于请求的ServletRequest监听。
ServletContex监听器
ServletContex又叫application
博弈AngularJS讲义(16) - 提供者
boyitech
js AngularJS api Angular Provider
Angular框架提供了强大的依赖注入机制,这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象,例如控制器,指令,过滤器动画等。
那注入器怎么知道如何去创建这些特殊的对象呢? Angular提供了5种方式让注入器创建对象,其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
java-写一函数f(a,b),它带有两个字符串参数并返回一串字符,该字符串只包含在两个串中都有的并按照在a中的顺序。
bylijinnan
java
public class CommonSubSequence {
/**
* 题目:写一函数f(a,b),它带有两个字符串参数并返回一串字符,该字符串只包含在两个串中都有的并按照在a中的顺序。
* 写一个版本算法复杂度O(N^2)和一个O(N) 。
*
* O(N^2):对于a中的每个字符,遍历b中的每个字符,如果相同,则拷贝到新字符串中。
* O(
sqlserver 2000 无法验证产品密钥
Chen.H
sql windows SQL Server Microsoft
在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
[新概念武器]气象战争
comsci
气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....
原因如下:
地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
oracle 中 rollup、cube、grouping 使用详解
daizj
oracle grouping rollup cube
oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu
-- 使用oracle 的样列库,演示 rollup, cube, grouping 的用法与使用场景
--- ROLLUP , 为了理解分组的成员数量,我增加了 分组的计数 COUNT(SAL)
技术资料汇总分享
Dead_knight
技术资料汇总 分享
本人汇总的技术资料,分享出来,希望对大家有用。
http://pan.baidu.com/s/1jGr56uE
资料主要包含:
Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...)
Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...)
Ser
初一下学期难记忆单词背诵第一课
dcj3sjt126com
english word
could 能够
minute 分钟
Tuesday 星期二
February 二月
eighteenth 第十八
listen 听
careful 小心的,仔细的
short 短的
heavy 重的
empty 空的
certainly 当然
carry 携带;搬运
tape 磁带
basket 蓝子
bottle 瓶
juice 汁,果汁
head 头;头部
截取视图的图片, 然后分享出去
dcj3sjt126com
OS Objective-C
OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast.
I implemented a category method on UIView to get the vi
MySql重置密码
fanxiaolong
MySql重置密码
方法一:
在my.ini的[mysqld]字段加入:
skip-grant-tables
重启mysql服务,这时的mysql不需要密码即可登录数据库
然后进入mysql
mysql>use mysql;
mysql>更新 user set password=password('新密码') WHERE User='root';
mysq
Ehcache(03)——Ehcache中储存缓存的方式
234390216
ehcache MemoryStore DiskStore 存储 驱除策略
Ehcache中储存缓存的方式
目录
1 堆内存(MemoryStore)
1.1 指定可用内存
1.2 驱除策略
1.3 元素过期
2 &nbs
spring mvc中的@propertysource
jackyrong
spring mvc
在spring mvc中,在配置文件中的东西,可以在java代码中通过注解进行读取了:
@PropertySource 在spring 3.1中开始引入
比如有配置文件
config.properties
mongodb.url=1.2.3.4
mongodb.db=hello
则代码中
@PropertySource(&
重学单例模式
lanqiu17
单例 Singleton 模式
最近在重新学习设计模式,感觉对模式理解更加深刻。觉得有必要记下来。
第一个学的就是单例模式,单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例,保证只有一个实例。
单例模式的常用实现方式有两种,就人们熟知的饱汉式与饥汉式,具体就不多说了。这里说下其他的实现方式
静态内部类方式:
package test.pattern.singleton.statics;
publ
.NET开源核心运行时,且行且珍惜
netcome
java .net 开源
背景
2014年11月12日,ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣布,微软将开源全部.NET核心运行时,并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布,其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器(GC)和核心
使用oscahe缓存技术减少与数据库的频繁交互
Everyday都不同
Web 高并发 oscahe缓存
此前一直不知道缓存的具体实现,只知道是把数据存储在内存中,以便下次直接从内存中读取。对于缓存的使用也没有概念,觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术,发现还是很有必要一探究竟的。
缓存技术使用背景:一般来说,对于web项目,如果我们要什么数据直接jdbc查库好了,但是在遇到高并发的情形下,不可能每一次都是去查数据库,因为这样在高并发的情形下显得不太合理——
Spring+Mybatis 手动控制事务
toknowme
mybatis
@Override
public boolean testDelete(String jobCode) throws Exception {
boolean flag = false;
&nbs
菜鸟级的android程序员面试时候需要掌握的知识点
xp9802
android
熟悉Android开发架构和API调用
掌握APP适应不同型号手机屏幕开发技巧
熟悉Android下的数据存储
熟练Android Debug Bridge Tool
熟练Eclipse/ADT及相关工具
熟悉Android框架原理及Activity生命周期
熟练进行Android UI布局
熟练使用SQLite数据库;
熟悉Android下网络通信机制,S