ry-ui.js

最新推荐文章于 2022-08-23 23:49:36 发布
最新推荐文章于 2022-08-23 23:49:36 发布
阅读量1.1k 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55069111/article/details/116480118
版权
本文将介绍如何在项目中引入并使用ry-ui.js库，包括基本调用方法和常见应用示例。
摘要由CSDN通过智能技术生成

调用方式

$.property.function  ($.属性.功能)

/**
 * 通用js方法封装处理
 * Copyright (c) 2019 ruoyi
 */

// 当前table相关信息
var table = {
   
    config: {
   },
    // 当前实例配置
    options: {
   },
    // 设置实例配置
    set: function(id) {
   
    	if($.common.getLength(table.config) > 1) {
   
            var tableId = $.common.isEmpty(id) ? $(event.currentTarget).parents(".bootstrap-table").find("table.table").attr("id") : id;
            if ($.common.isNotEmpty(tableId)) {
   
                table.options = table.get(tableId);
            }
    	}
    },
    // 获取实例配置
    get: function(id) {
   
        return table.config[id];
    },
    // 记住选择实例组
    rememberSelecteds: {
   },
    // 记住选择ID组
    rememberSelectedIds: {
   }
};

(function ($) {
   
    $.extend({
   
    	_tree: {
   },
    	bttTable: {
   },
    	// 表格封装处理
    	table: {
   
            // 初始化表格参数
            init: function(options) {
   
            	var defaults = {
   
                    id: "bootstrap-table",
                    type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTable
                    method: 'post',
                    height: undefined,
                    sidePagination: "server",
                    sortName: undefined,
                    sortOrder: "asc",
                    pagination: true,
                    paginationLoop: false,
                    pageSize: 10,
                    pageNumber: 1,
                    pageList: [10, 25, 50],
                    toolbar: "toolbar",
                    loadingFontSize: 13,
                    striped: false,
                    escape: false,
                    firstLoad: true,
                    showFooter: false,
                    search: false,
                    showSearch: true,
                    showPageGo: false,
                    showRefresh: true,
                    showColumns: true,
                    showToggle: true,
                    showExport: false,
                    clickToSelect: false,
                    singleSelect: false,
                    mobileResponsive: true,
                    maintainSelected: false,
                    rememberSelected: false,
                    fixedColumns: false,
                    fixedNumber: 0,
                    fixedRightNumber: 0,
                    queryParams: $.table.queryParams,
                    rowStyle: {
   },
                };
            	var options = $.extend(defaults, options);
            	table.options = options;
            	table.config[options.id] = options;
                $.table.initEvent();
                $('#' + options.id).bootstrapTable({
   
                    id: options.id,
                    url: options.url,                                   // 请求后台的URL（*）
                    contentType: "application/x-www-form-urlencoded",   // 编码类型
                    method: options.method,                             // 请求方式（*）
                    cache: false,                                       // 是否使用缓存
                    height: options.height,                             // 表格的高度
                    striped: options.striped,                           // 是否显示行间隔色
                    sortable: true,                                     // 是否启用排序
                    sortStable: true,                                   // 设置为 true 将获得稳定的排序
                    sortName: options.sortName,                         // 排序列名称
                    sortOrder: options.sortOrder,                       // 排序方式  asc 或者 desc
                    pagination: options.pagination,                     // 是否显示分页（*）
                    paginationLoop: options.paginationLoop,             // 是否启用分页条无限循环的功能
                    pageNumber: 1,                                      // 初始化加载第一页，默认第一页
                    pageSize: options.pageSize,                         // 每页的记录行数（*） 
                    pageList: options.pageList,                         // 可供选择的每页的行数（*）
                    firstLoad: options.firstLoad,                       // 是否首次请求加载数据，对于数据较大可以配置false
                    escape: options.escape,                             // 转义HTML字符串
                    showFooter: options.showFooter,                     // 是否显示表尾
                    iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
                    toolbar: '#' + options.toolbar,                     // 指定工作栏
                    loadingFontSize: options.loadingFontSize,           // 自定义加载文本的字体大小
                    sidePagination: options.sidePagination,             // server启用服务端分页client客户端分页
                    search: options.search,                             // 是否显示搜索框功能
                    searchText: options.searchText,                     // 搜索框初始显示的内容，默认为空
                    showSearch: options.showSearch,                     // 是否显示检索信息
                    showPageGo: options.showPageGo,                     // 是否显示跳转页
                    showRefresh: options.showRefresh,                   // 是否显示刷新按钮
                    showColumns: options.showColumns,                   // 是否显示隐藏某列下拉框
                    showToggle: options.showToggle,                     // 是否显示详细视图和列表视图的切换按钮
                    showExport: options.showExport,                     // 是否支持导出文件
                    showHeader: options.showHeader,                     // 是否显示表头
                    showFullscreen: options.showFullscreen,             // 是否显示全屏按钮
                    uniqueId: options.uniqueId,                         // 唯一的标识符
                    clickToSelect: options.clickToSelect,               // 是否启用点击选中行
                    singleSelect: options.singleSelect,                 // 是否单选checkbox
                    mobileResponsive: options.mobileResponsive,         // 是否支持移动端适配
                    cardView: options.cardView,                         // 是否启用显示卡片视图
                    detailView: options.detailView,                     // 是否启用显示细节视图
                    onCheck: options.onCheck,                           // 当选择此行时触发
                    onUncheck: options.onUncheck,                       // 当取消此行时触发
                    onCheckAll: options.onCheckAll,                     // 当全选行时触发
                    onUncheckAll: options.onUncheckAll,                 // 当取消全选行时触发
                    onClickRow: options.onClickRow,                     // 点击某行触发的事件
                    onDblClickRow: options.onDblClickRow,               // 双击某行触发的事件
                    onClickCell: options.onClickCell,                   // 单击某格触发的事件
                    onDblClickCell: options.onDblClickCell,             // 双击某格触发的事件
                    onEditableSave: options.onEditableSave,             // 行内编辑保存的事件
                    onExpandRow: options.onExpandRow,                   // 点击详细视图的事件
                    onPostBody: options.onPostBody,                     // 渲染完成后执行的事件
                    maintainSelected: options.maintainSelected,         // 前端翻页时保留所选行
                    rememberSelected: options.rememberSelected,         // 启用翻页记住前面的选择
                    fixedColumns: options.fixedColumns,                 // 是否启用冻结列（左侧）
                    fixedNumber: options.fixedNumber,                   // 列冻结的个数（左侧）
                    fixedRightNumber: options.fixedRightNumber,         // 列冻结的个数（右侧）
                    onReorderRow: options.onReorderRow,                 // 当拖拽结束后处理函数
                    queryParams: options.queryParams,                   // 传递参数（*）
                    rowStyle: options.rowStyle,                         // 通过自定义函数设置行样式
                    footerStyle: options.footerStyle,                   // 通过自定义函数设置页脚样式
                    headerStyle: options.headerStyle,                   // 通过自定义函数设置标题样式
                    columns: options.columns,                           // 显示列信息（*）
                    data: options.data,                                 // 被加载的数据
                    responseHandler: $.table.responseHandler,           // 在加载服务器发送来的数据之前处理函数
                    onLoadSuccess: $.table.onLoadSuccess,               // 当所有数据被加载时触发处理函数
                    exportOptions: options.exportOptions,               // 前端导出忽略列索引
                    printPageBuilder: options.printPageBuilder,         // 自定义打印页面模板
                    detailFormatter: options.detailFormatter,           // 在行下面展示其他数据列表
                });
            },
            // 获取实例ID，如存在多个返回#id1,#id2 delimeter分隔符
            getOptionsIds: function(separator) {
   
            	var _separator = $.common.isEmpty(separator) ? "," : separator;
            	var optionsIds = "";  
            	$.each(table.config, function(key, value){
   
                    optionsIds += "#" + key + _separator;
            	});
            	return optionsIds.substring(0, optionsIds.length - 1);
            },
            // 查询条件
            queryParams: function(params) {
   
                var curParams = {
   
                    // 传递参数查询参数
                    pageSize:       params.limit,
                    pageNum:        params.offset / params.limit + 1,
                    searchValue:    params.search,
                    orderByColumn:  params.sort,
                    isAsc:          params.order
                };
            	var currentId = $.common.isEmpty(table.options.formId) ? $('form').attr('id') : table.options.formId;
            	return $.extend(curParams, $.common.formToJSON(currentId)); 
            },
            // 请求获取数据后处理回调函数
            responseHandler: function(res) {
   
            	if (typeof table.get(this.id).responseHandler == "function") {
   
                    table.get(this.id).responseHandler(res);
                }
                if (res.code == web_status.SUCCESS) {
   
                    if ($.common.isNotEmpty(table.options.sidePagination) && table.options.sidePagination == 'client') {
   
                    	return res.rows;
                    } else {
   
                    	if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
   
                            var column = $.common.isEmpty(table.options.uniqueId) ? table.options.columns[1].field : table.options.uniqueId;
                            $.each(res.rows, function(i, row) {
   
                                row.state = $.inArray(row[column], table.rememberSelectedIds[table.options.id]) !== -1;
                            })
                    	}
                        return {
    rows: res.rows, total: res.total };
                    }
                } else {
   
                    $.modal.alertWarning(res.msg);
                    return {
    rows: [], total: 0 };
                }
            },
            // 初始化事件
            initEvent: function() {
   
            	// 实例ID信息
            	var optionsIds = $.table.getOptionsIds();
            	// 监听事件处理
            	$(optionsIds).on(TABLE_EVENTS, function () {
   
                    table.set($(this).attr("id"));
            	});
            	// 在表格体渲染完成，并在 DOM 中可见后触发（事件）
            	$(optionsIds).on("post-body.bs.table", function (e, args) {
   
                    // 浮动提示框特效
                    $(".table [data-toggle='tooltip']").tooltip();
                    // 气泡弹出框特效
                    $('.table [data-toggle="popover"]').popover();
            	});
            	// 选中、取消、全部选中、全部取消（事件）
            	$(optionsIds).on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rowsAfter, rowsBefore) {
   
                    // 复选框分页保留保存选中数组
                    var rows = $.common.equals("uncheck-all", e.type) ? rowsBefore : rowsAfter;
                    var rowIds = $.table.affectedRowIds(rows);
                    if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
   
                        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
                        var selectedIds = table.rememberSelectedIds[table.options.id];
                        if($.common.isNotEmpty(selectedIds)) {
   
                            table.rememberSelectedIds[table.options.id] = _[func](selectedIds, rowIds);
                        } else {
   
                            table.rememberSelectedIds[table.options.id] = _[func]([], rowIds);
                        }
                        var selectedRows = table.rememberSelecteds[table.options.id];
                        if($.common.isNotEmpty(selectedRows)) {
   
                            table.rememberSelecteds[table.options.id] = _[func](selectedRows, rows);
                        } else {
   
                            table.rememberSelecteds[table.options.id] = _[func]([], rows);
                        }
                    }
            	});
            	// 加载成功、选中、取消、全部选中、全部取消（事件）
            	$(optionsIds).on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
   
                    var toolbar = table.options.toolbar;
                    var uniqueId = table.options.uniqueId;
                    // 工具栏按钮控制
                    var rows = $.common.isEmpty(uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(uniqueId);
                    // 非多个禁用
                    $('#' + toolbar + ' .multiple').toggleClass('disabled', !rows.length);
                    // 非单个禁用
                    $('#' + toolbar + ' .single').toggleClass('disabled', rows.length!=1);
            	});
            	// 图片预览事件
            	$(optionsIds).off("click").on("click", '.img-circle', function() {
   
                    var src = $(this).attr('src');
                    var target = $(this).data('target');
                    if($.common.equals("self", target)) {
   
                        var height = $(this).data('height');
                        var width = $(this).data('width');
                        // 如果是移动端，就使用自适应大小弹窗
                        if ($.common.isMobile()) {
   
                            width = 'auto';
                            height = 'auto';
                        }
                        layer.open({
   
                            title: false,
                            type: 1,
                            closeBtn: true,
                            shadeClose: true,
                            area: ['auto', 'auto'],
                            content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>"
                        });
                    } else if ($.common.equals("blank", target)) {
   
                        window.open(src);
                    }
                });
            	// 单击tooltip事件
            	$(optionsIds).on("click", '.tooltip-show', function() {
   
                    var target = $(this).data('target');
                    var input = $(this).prev();
                    if ($.common.equals("copy", target)) {
   
                        input.select();
                        document.execCommand("copy");
                    } else if ($.common.equals("open", target)) {
   
                        parent.layer.alert(input.val(), {
   
                            title: "信息内容",
                            shadeClose: true,
                            btn: ['确认'],
                            btnclass: ['btn btn-primary'],
                        });
                    }
            	});
            },
            // 当所有数据被加载时触发
            onLoadSuccess: function(data) {
   
            	if (typeof table.options.onLoadSuccess == "function") {
   
                    table.options.onLoadSuccess(data);
            	}
            },
            // 表格销毁
            destroy: function (tableId) {
   
            	var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;
            	$("#" + currentId).bootstrapTable('destroy');
            	delete table.rememberSelectedIds[currentId];
            	delete table.rememberSelecteds[currentId];
            },
            // 序列号生成
            serialNumber: function (index, tableId) {
   
                var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;
                var tableParams = $("#" + currentId).bootstrapTable('getOptions');
                var pageSize = $.common.isNotEmpty(tableParams.pageSize) ? tableParams.pageSize: table.options.pageSize;
                var pageNumber = $.common.isNotEmpty(tableParams.pageNumber) ? tableParams.pageNumber: table.options.pageNumber;
                return pageSize * (pageNumber - 1) + index + 1;
            },
            // 列超出指定长度浮动提示 target（copy单击复制文本 open弹窗打开文本）
            tooltip: function (value, length, target) {
   
                var _length = $.common.isEmpty(length) ? 20 : length;
                var _text = "";
                var _value = $.common.nullToStr(value);
                var _target = $.common.isEmpty(target) ? 'copy' : target;
                if (_value.length > _length) {
   
                    _text = _value.substr(0, _length) + "...";
                    _value = _value.replace(/\'/g,"&apos;");
                    _value = _value.replace(/\"/g,"&quot;");
                    var actions = [];
                    actions.push($.common.sprintf('<input style="opacity: 0;position: absolute;width:5px;z-index:-1" type="text" value="%s"/>', _value));
                    actions.push($.common.sprintf('<a href="###" class="tooltip-show" data-toggle="tooltip" data-target="%s" title="%s">%s</a>', _target, _value, _text));
                    return actions.join('');
                } else {
   
                    _text = _value;
                    return _text;
                }
            },
            // 下拉按钮切换
            dropdownToggle: function (value) {
   
                var actions = [];
                actions.push('<div class="btn-group">');
                actions.push('<button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false">');
                actions.push('<i class="fa fa-cog"></i>&nbsp;<s
最低0.47元/天 解锁文章
空想迷城
关注
ry-ui.js解读和定制
m0_54938705的博客
06-01 2524
若依系统的前端操作大部分储存在/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js中。 本文对其中的各方法进行了一些备注，新增了几个方法。 有一些console.log输出的部分已经被注释掉，根据需要加回来查看可以方便理解。 js文件和配套的html如下： /** * 通用js方法封装处理 * Copyright (c) 2019 ruoyi */ // 当前table相关信息 //把table的数据取出来就在这里，table.set找到t
Layui table 修改为双击编辑
FsMoDi的博客
10-24 1554
Layui table 修改为双击编辑
ajax如何提交多表单的值_LayUI提交表单，监听select，分页组件
weixin_39745269的博客
11-21 240
1、LayUI提交表单这几天做项目，用到提交layui框架的弹出层的表单，因为需要在提交表单后，关闭当前弹出层，同时刷新父窗口的数据，因此，用普通的提交就不行了，因为普通的提交到后台之后没有返回值，就无法做到关闭弹出层和刷新父窗口。找了很多方法，包括查看api，找异步提交方法等，都没有找到合适的方法(也许是我太笨)，最后，在小伙伴的帮助下，终于找到了一个好用的方法。在此，对我的小伙伴表示...
ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
weixin_32207065的博客
08-06 218
模拟select下拉框之多选*{margin:0;padding:0;}ul,li{list-style:none;}#test{margin:20px 10px;}.clearfix:before,.clearfix:after{content:\'\';display:block;overflow:hidden;clear:both;height:1px;}.fruitTitle{float:...
bootstrap / select、selectpicker 单选/多选/ ajax获取、各种刷新、重置 / 验证样式
热门推荐
freedomVenly的博客
09-27 1万+
单选： &amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;amp;amp;amp;quot;zh-CN&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;a
select选择标签与Ajax运用
weixin_50622066的博客
08-23 812
Ajax与select选择标签
Font Awesome
多啦的博客
04-17 633
Font Awesome是一套图标字体库和CSS框架，提供了丰富的矢量字体图标，不依赖JS，通过CSS可以控制所有图标的大小、颜色和阴影，可以Bootstrap等框架一起使用，Font Awesome中文兼容IE7+，完全免费。
juery.ui.js
10-30
jquery-ui插件，juery.fqileUpLoad.js的依赖文件！需要引入JQ
【问题来了】针对若依Ruoyi开源项目的个性化改造问题
小飞快跑的博客
04-07 5305
文章目录前言一、pandas是什么？二、使用步骤总结 前言 一、pandas是什么？ 二、使用步骤 总结
bootstrap table表格使用方法详解
11-29
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下 1.进入页面，根据指定的URL加载数据(json格式) 2.加载成功，根据$table.bootstrapTable({options})显示表格样式。 感觉还是挺漂亮的哈，OK，下面贴代码解释功能。  开始之前，当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> <link h
jquery 插件开发 extjs中的extend用法小结
12-11
在JavaScript的世界里，jQuery和Ext JS都是非常流行的库，它们提供了丰富的功能来简化Web开发。在两者中，`extend`函数是一个重要的工具，用于合并对象属性。本文将深入讲解jQuery和Ext JS中`extend`方法的用法。 ...
bootstrap-table分页记住勾选
huangbaokang的博客
08-08 3081
var hbk_names = new Array();// 全局保存人员名字的数组 // 绑定选中事件、取消事件、全部选中、全部取消 $.btTable.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) { // ...
bootstrap table获取数据为空时重新加载表格不显示之前的数据
IT_CREATE的博客
08-05 6111
当bootstrap table 获取数据为空时，我们不想显示之前的数据，那么调用bootstrap table 的onLoadSuccess方法： onLoadSuccess: function (data) { var allTableData = $('#bootstrap-table').bootstrapTable('getData'); ...
工作流流程部署 一般功能代码
狼魂之力
02-01 264
登录名称： ...
vue-上传附件
w_jiunian的博客
04-12 1313
<template> <div class="upload-file"> <!-- multiple 多选文件，有部分文件会丢失 --> <el-upload v-show="isDel" :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" .
formatter（value,row,index）{} 参数的含义 （亲测有效）
zhengyuantoo的博客
12-11 3983
formatter （value,row,index）{} 参数的含义 formatter 属于列参数，表示对于当前列的数据进行格式化操作，它是一个函数，有三个参数，分别是value，row,index value：表示当前单元格中的值 row：表示当前行 index：表示当前行的下标 可以使用return返回想要的数据显示在单元格中 在element 中 el-table 中使用： <el-table-column label="接通状态" :show-overflow-tooltip="true"
笔记-实例
weixin_45407811的博客
04-08 724
1.数据报表 1.年逐日报表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <title>年逐日雨量统计表</title> <style type="text/css"&gt.
初学者对formatter的理解
feng905001561的专栏
03-24 8262
第一次使用formatter时，是在用easyui作后台维护时接触到的。现在简单谈谈formatter在easyui中的常规使用。 一般使用时是在对数据库读取的数据不能直接显示时，需要进行转换时调用formatter，例如数据库对男女存放的为int型的0，1而在页面显示时则是需要显示男、女。这时就可以使用formatter了。使用方式为 formatter：function（value，row,...
相机旋转矩阵为[[0.309, -0.939, 0.149], [0.916, 0.278, -0.288], [0.254, 0.202, 0.946]]求相机平移向量
最新发布
05-19
假设相机的平移向量为 $t = [t_x, t_y, t_z]^T$，则相机的旋转-平移矩阵为： $$ M = \begin{bmatrix} R & t \\ 0_{1\times 3} & 1 \end{bmatrix} $$ 其中 $R$ 表示相机的旋转矩阵，$0_{1\times 3}$ 表示一个 $1\times 3$ 的零向量，$1$ 表示一个标量。 将 $M$ 与世界坐标系下的一个点 $\mathbf{P} = [X,Y,Z,1]^T$ 相乘可得到相机坐标系下的坐标 $\mathbf{P_c} = [X_c,Y_c,Z_c,1]^T$： $$ \mathbf{P_c} = M \cdot \mathbf{P} = \begin{bmatrix} R & t \\ 0_{1\times 3} & 1 \end{bmatrix} \begin{bmatrix} X \\ Y \\ Z \\ 1 \end{bmatrix} = \begin{bmatrix} RX + t_x \\ RY + t_y \\ RZ + t_z \\ 1 \end{bmatrix} $$ 假设相机坐标系原点在相机的光心处，则 $\mathbf{P_c}$ 中的前三个元素就是 $\mathbf{P}$ 在相机坐标系下的坐标。因此，我们可以将 $\mathbf{P_c}$ 中的前三个元素表示为： $$ \begin{aligned} X_c &= RX + t_x \\ Y_c &= RY + t_y \\ Z_c &= RZ + t_z \end{aligned} $$ 将相机旋转矩阵和上式代入可得： $$ \begin{aligned} X_c &= 0.309X - 0.939Y + 0.149Z + t_x \\ Y_c &= 0.916X + 0.278Y - 0.288Z + t_y \\ Z_c &= 0.254X + 0.202Y + 0.946Z + t_z \end{aligned} $$ 因此，相机的平移向量为 $t = [t_x, t_y, t_z]^T = [-0.467, -0.189, -1.118]^T$。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值