代码拉取完成，页面将自动刷新
royui 是一款简单、高效、灵活的 js web 框架,很符合开发者使用习惯。目前有 treetable、分页、水印、时间段选择 插件,作者还在努力编写其它插件,欢迎各位志同道合的朋友一起参与。
let r = new royui();
r.treeTable({
elem: '#treeTable', // 容器
url: 'http://localhost/data.php', // url ajax模式
method: 'post', // url模式请求方式
where: {'param1': 'value1'}, // url请求参数
data: $data, // 直接赋值数据,初始化会优先使用此模式,$data数据两个特别属性：tip:此属性是鼠标悬停在图标列文字上时的提示 has_children:此属性标识此行是否有子项, 若没有子项则不显示图标, 如果没有此属性就是普通的表格
is_cache: true, // 是否缓存,默认是
method: 'post',
checkbox: true,
cols: [ // 列参数
{
field: 'name', // 数据字段名
title: '姓名', // 表头列名称
title_style: 'text-align:left', // 表头列样式
style: 'width: 300px', // 数据列样式
is_sort: true, // 是否支持排序
className: '', // 列的样式类名
data: 'id', // 给列添加 data-id 属性，默认值为当前列的字段名对应的值
type: 'select', // 列的值显示控件类型，select-下拉框，text-文本框，checkbox-复选框，normal-直接显示
template: function(row){} // 自定义显示内容
},
{
title: '操作', // 表头列名称
action: [{'matter': 'info|details','url': '#','method': 'popup|self','area': ['300px','400px']}, 'hide': {field: '字段名', 'field_value': [字段值]}], // matter:操作按钮类型(info或details是详情,edit或modify是编辑,delete或del是删除) url:操作访问的链接 method: 操作链接打开方式(popup是弹窗打开,self是在本窗口打开) hide: 满足条件隐藏此按钮
template: function (row){}, // 自定义显示内容,连接action按钮一起显示
site: 'front|after' // 自定义内容显示位置,front:在action按钮前 after:在action按钮后
}
],
sort_field: 'ctime', // 排序字段名
sort_type: 'desc', // 排序方式，默认倒序
tree: {
iconIndex: 0, // 图标列的索引
primary_key: 'id', // 主键名称,默认id
icon: '', // 折叠图标,有默认,可不填
loading_type: 'circle' // 动态加载数据时 loading 图标样式, 可选 line: 线状 circle: 圆圈状 默认圆圈状
},
paging: false, // 列表页是否启用分页
pages: 10, // 总页数
first_page: true, // 是否开启首页按钮,可以设为自定义文字
last_page: true, // 是否开启尾页按钮,可以设为自定义文字
next_page: true, // 是否开启下一页按钮,可以设为自定义文字
prev_page: true, // 是否开启上一页按钮,可以设为自定义文字
total_page: true, // 是否显示总页数
jump_to: false, // 是否显示跳转到
checkbox: true, // 是否显示复选框
onSelected: function ($item,$obj) {}, // 选择行回调函数,$item是所选行的数据,$obj是所选行的标签
onSelectAll: function () {}, // 全选回调函数
onUpdated: function ($result,$obj) {}, // 修改成功后回调函数,$result是修改后的数据,$obj是所点击的修改按钮标签
onDeleted: function ($result,$obj) {} // 删除成功后回调函数,$result是删除参数,$obj是所点击的删除按钮标签
})
let r = new royui();
r.paging({
elem: '#paging', // 容器
count: 123, // 数据总条数
page_size: 25, // 每页显示多少条
first_page: true, // 是否显示首页按钮, 默认不显示, 可以设想要的文字
prev_page: '上页', // 是否显示上一页按钮, 默认不显示, 可以设为想要的文字
next_page: true, // 是否显示下一页按钮, 默认不显示, 可以设为想要的文字
last_page: true, // 是否显示尾页按钮, 默认不显示, 可以设为想要的文字
show: 5, // 页码按钮数量, 默认 5 个
show_total: false, // 是否显示总条数, 默认显示
jump_to: true // 是否显示跳转框, 默认不显示
})
let r = new royui();
r.watermark({
watermark_txt: '某某公司', // 水印文字
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
watermark_rows: 0, // 水印行数
watermark_cols: 0, // 水印列数
watermark_x_space: 100, // 水印x轴间隔
watermark_y_space: 50, // 水印y轴间隔
watermark_color: '#aaaaaa', // 水印字体颜色
watermark_alpha: 0.3, // 水印透明度
watermark_fontsize: '16px', // 水印字体大小
watermark_font: '微软雅黑', // 水印字体样式
watermark_width: 210, // 水印宽度
watermark_height: 80, // 水印长(高)度
watermark_angle: 15, // 水印倾斜度数
})
let r = new royui();
r.timequantum('.ttt')
let r = new royui()
r.upload({
elem: $options.elem ?? undefined, // 上传控件
auto: $options.auto ?? true, // 是否自动上传，默认true
method: $options.message ?? 'post', // 上传请求方式，默认post
fileType: $options.fileType ?? '*', // 可上传的文件类型，默认所有
buttonText: $options.buttonText ?? 'Select Files', // 选择文件按钮的文字
buttonClass: $options.buttonClass ?? false, // 选择文件按钮的样式类
fileObjName: $options.fileObjName ?? 'Filedata', // 上传请求参数名
fileSizeLimit: $options.fileSizeLimit ?? '0', // 上传文件大小限制，0为不限制
multi: $options.multi ?? false, // 是否可上传多个文件
limit: $options.limit ?? 0, // 上传文件个数限制
formData: $options.formData ?? {}, // 发送给服务端的其它参数
uploadScript: $options.uploadScript, // 服务端地址
onUploadComplete: $options.onUploadComplete ?? undefined, // 上传成功后回调函数
onError: $options.onError ?? undefined // 上传出错回调函数
})
let $r = new royui();
$r.edititem({
elem: '.edititem',// 要实现编辑效果的控件
url: 'update/item',// ajax 修改数据 URL，和控件的data-url属性必须有其一，以data-url为先
param: {id: '111'},// 发送到服务端的参数({id: 'id值'})，必须至少有一项数据的标识
})
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。