分类 jquery 下的文章

BootStrap table 左侧固定列，表头固定垂直滚动条，水平滚动条展示在可视化界面

2024-08-13

要实现Bootstrap Table的左侧固定列，表头固定，且具有垂直滚动条的功能，可以使用Bootstrap Table的fixedColumns扩展。以下是实现这一功能的基本步骤和示例代码：

引入必要的CSS和JS文件：




<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
 
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
 
<!-- Fixed Columns Extension JS -->
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>

设置HTML结构，创建表格：




<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <table id="myTable"
             data-toggle="table"
             data-height="400"
             data-fixed-columns="true"
             data-fixed-number="1">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <!-- more headers -->
          </tr>
        </thead>
        <tbody>
          <!-- table rows -->
        </tbody>
      </table>
    </div>
  </div>
</div>

初始化表格并设置固定列的数量：




$(function() {
  var $table = $('#myTable');
  $table.bootstrapTable({
    data: data // 假设你有一个数据源叫做data
  });
});

data-fixed-columns="true"属性启用固定列功能，data-fixed-number="1"设置你想要固定的列数，例如，设置为1将固定第一列。

确保你的表格容器.container-fluid有足够的宽度，以便水平滚动条能够显示在可视化界面。

以上代码实现了Bootstrap Table的左侧固定列功能，表头固定，并且具有垂直滚动条。水平滚动条会显示在可视化界面，以便用户可以在较大分辨率下同时查看表格的横向内容。

- 阅读更多 -

JQuery-JavaScript代码库-获取内容及删除篇—我耀学IT

System

2024-08-13

所有,jquery




// 获取元素内容的函数
function getContent(selector) {
    var element = document.querySelector(selector);
    if (element) {
        return element.textContent;
    }
    return null;
}
 
// 删除元素的函数
function removeElement(selector) {
    var element = document.querySelector(selector);
    if (element) {
        element.parentNode.removeChild(element);
    }
}
 
// 示例使用
var content = getContent('#myElement');
console.log(content); // 打印元素的内容
 
removeElement('#myElement'); // 删除元素

这段代码定义了两个函数getContent和removeElement，分别用于获取指定元素的内容和删除指定元素。使用时，可以传入CSS选择器来指定需要操作的DOM元素。函数首先尝试查询元素，如果找到，则执行相应的操作；否则返回null或不执行操作。这是一个简单的示例，展示了如何使用原生JavaScript进行DOM操作。

System

2024-08-13

所有,jquery

在Layui中，使用transfer组件可以实现两个列表之间的选择，并且可以通过配置drag属性来启用拖动功能，从而允许用户在选择后调整列表项的顺序。

以下是一个简单的实例代码，展示了如何使用Layui的transfer组件实现带有拖动调整功能的选择框：




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui Transfer Drag Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"  media="all">
</head>
<body>
 
<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">选择项:</label>
    <div class="layui-input-block">
      <input type="hidden" id="transfer-result" name="transfer-result">
      <div id="transfer-box"></div>
    </div>
  </div>
</div>
  
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use(function(){
  var transfer = layui.transfer;
  
  transfer.render({
    elem: '#transfer-box',
    data: [ // 数据格式为数组
      {value: '1', title: '选项1'},
      {value: '2', title: '选项2'},
      {value: '3', title: '选项3'},
      {value: '4', title: '选项4'},
      {value: '5', title: '选项5'},
      {value: '6', title: '选项6'}
    ],
    value: ['2', '5'], // 初始选中值
    theme: 'success', // 主题
    drag: true // 开启拖动功能
  });
  
  // 监听选中项变化
  transfer.on('change', function(obj){
    console.log(obj.value); // 当前选中的值
    document.getElementById('transfer-result').value = obj.value.join(',');
  });
});
</script>
</body>
</html>

在这个例子中，transfer.render方法用来初始化穿梭框，并通过data属性设置可供选择的项。value属性用来设置初始选中的项。drag属性设置为true启用拖动功能，允许用户拖动已选择的项来重新排列它们。transfer.on('change', function(obj){...})用来监听选中项的变化，并可以实现将最终选中的值赋给一个隐藏字段，供后续处理或提交。

System

2024-08-13

所有,jquery

由于提供的源代码已经是一个完整的系统，我们可以简要概述系统的设计和实现。

系统设计概览：

用户登录：系统通过Spring Security进行用户认证和授权。
请假申请：员工可以通过网页提交请假申请。
请假审批：部门负责人可以登录系统审批请假申请。
数据库操作：MyBatis作为ORM工具，处理数据库的交互。
前端界面：使用HTML和Bootstrap构建简洁的用户界面，jQuery用于增加界面的交互性。

系统实现概览：

用户登录：使用Spring Security配置登录表单，并结合数据库认证用户。
请假申请：前端发送请假信息到后端，后端通过MyBatis将数据插入数据库。
请假审批：后端通过MyBatis查询数据库中的请假申请，前端展示并允许审批。
数据库设计：设计请假申请和用户认证所需的数据库表。
前端界面设计：设计简洁的网页布局和交互。

以下是核心代码片段：

UserController.java (用户登录和注销的控制器)




@Controller
public class UserController {
    @RequestMapping(value = "/login", method = RequestMethod.GET)
    public String login() {
        return "login";
    }
 
    @RequestMapping(value = "/logout", method = RequestMethod.GET)
    public String logout(HttpSession session) {
        session.invalidate();
        return "redirect:/login";
    }
}

LeaveController.java (请假申请的控制器)




@Controller
public class LeaveController {
    @Autowired
    private LeaveService leaveService;
 
    @PostMapping("/applyLeave")
    @ResponseBody
    public String applyLeave(@RequestParam("startTime") String startTime,
                             @RequestParam("endTime") String endTime,
                             @RequestParam("reason") String reason,
                             HttpSession session) {
        User user = (User) session.getAttribute("user");
        Leave leave = new Leave(user.getUsername(), startTime, endTime, reason);
        leaveService.applyLeave(leave);
        return "success";
    }
}

LeaveMapper.java (MyBatis映射器，用于数据库操作)




@Mapper
public interface LeaveMapper {
    void insertLeave(Leave leave);
    List<Leave> getAllLeaves();
    Leave getLeaveById(int id);
    void updateLeave(Leave leave);
}

application.properties (数据库配置文件)




spring.datasource.url=jdbc:mysql://localhost:3306/leave_management_system?useSSL=false
spring.datasource.username=root
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

以上代码提供了系统设计和实现的概览，并展示了核心组件的工作方式。实际的系统还涉及更多细节，例如安全配置、异常处理、用户权限管理等。

由于篇幅限制，这里不可能提供完整的系统实现。如果需要完整的源代码，您可能需要联系原作者或从原文提供的链接获取。

System

2024-08-13

所有,jquery

在Spring Boot中，WebJars提供了一个方便的方式来引入前端静态资源，如JavaScript库和CSS框架。你可以通过Maven或Gradle依赖的方式来引入这些资源。

首先，在pom.xml中添加WebJar依赖，例如Bootstrap和jQuery：




<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.6.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.6.0</version>
</dependency>

然后，你可以在HTML中通过WebJar的路径来引用这些资源：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebJars Example</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, WebJars!</h1>
 
    <!-- jQuery first, then Bootstrap JS. -->
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

对于自定义图标和图片，你可以将它们放在src/main/resources/static目录下，然后在HTML中通过相对路径来引用。

例如，你有一个自定义图标放在src/main/resources/static/images/favicon.ico，你可以在index.html中通过以下方式引用：




<link rel="icon" href="images/favicon.ico" type="image/x-icon">

在Spring Boot中，静态资源的默认路径是/static、/public、/resources、/META-INF/resources。因此，不需要额外配置，只要将资源放在这些目录下，Spring Boot就会自动将它们暴露出来。

- 阅读更多 -

JQuery 只读(readOnly)和禁用(disabled)

System

2024-08-13

所有,jquery

在HTML中，有两种方法可以禁用和设置文本输入字段的只读状态：readOnly属性和disabled属性。readOnly属性用于指示输入字段是只读的，即用户可以查看该字段的值，但不能修改它。disabled属性用于完全禁用输入字段：用户既不能查看也不能修改该字段的值。

在jQuery中，您可以使用.prop()方法来设置这两个属性。以下是如何使用jQuery来设置只读和禁用状态的示例代码：




// 设置只读状态
$('#myInput').prop('readOnly', true);
 
// 移除只读状态
$('#myInput').prop('readOnly', false);
 
// 设置禁用状态
$('#myInput').prop('disabled', true);
 
// 移除禁用状态
$('#myInput').prop('disabled', false);

在上述代码中，#myInput是要修改的输入字段的ID。您可以根据需要更改此ID。

- 阅读更多 -

jquery-i18n实现国际化（翻译）功能

System

2024-08-13

所有,jquery




// 引入jQuery和jquery-i18n插件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery-i18n.min.js"></script>
 
// 在页面中添加用于翻译的元素
<div id="translated-content">This will be translated.</div>
 
// 定义语言资源文件，通常会有多个语言的JSON文件
// en.json 表示英语翻译
// es.json 表示西班牙语翻译
// 文件内容示例：{"translationKey": "Translated Text"}
 
// 初始化语言资源
$.i18n.properties({
    name: 'translations', // 资源文件的基础名
    path: 'path/to/lang/', // 资源文件所在的路径
    mode: 'map', // 使用map模式加载
    callback: function() { // 加载完成后的回调函数
        // 使用 $.i18n.prop 方法获取翻译文本
        var translatedText = $.i18n.prop('translationKey');
 
        // 将获取的翻译文本应用到页面元素中
        $('#translated-content').text(translatedText);
    }
});
 
// 设置当前语言
$.i18n.language = 'en'; // 或者 'es' 来切换语言

这段代码展示了如何使用jquery-i18n插件来实现简单的翻译功能。首先，引入必要的jQuery和jquery-i18n库。然后，在页面中定义需要翻译的元素。接着，初始化语言资源，并在加载完成后从资源文件中获取翻译文本，最后将获取的翻译文本应用到页面元素中。通过改变$.i18n.language的值，可以在不同的语言之间切换。

- 阅读更多 -

跨域问题解析：利用jQuery解决跨域限制

System

2024-08-13

所有,jquery

跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个域的JavaScript代码访问其他域的网页内容。但是，我们可以使用一些技巧和方法来绕过这个限制。

其中一种方法是使用jQuery的$.ajax()函数，通过设置dataType为jsonp来实现跨域请求。JSONP（JSON with Padding）是一种跨域请求的方式，它通过动态创建<script>标签来实现跨域请求，并且它只支持GET请求。

下面是一个使用jQuery解决跨域问题的示例代码：




$.ajax({
    url: "http://其他域的URL/api/data", // 要访问的API地址
    type: "GET",
    dataType: "jsonp", // 指定使用JSONP方式解决跨域问题
    jsonpCallback: "callbackFunction", // 服务器端用于包装JSON数据的函数名
    success: function(response) {
        // 成功获取数据后的回调函数
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败的回调函数
        console.log('JSONP request failed: ' + textStatus);
    }
});
 
// 回调函数，用于接收JSONP响应
function callbackFunction(data) {
    // 处理从其他域传回的数据
    console.log(data);
}

在上面的代码中，我们通过$.ajax()发起一个JSONP请求，指定dataType为jsonp并提供一个jsonpCallback函数名。服务器端必须支持JSONP请求，并且返回的数据应该被callbackFunction函数包装起来。

请注意，JSONP只支持GET请求，并且它不是一种真正的跨域请求解决方案，它的工作原理是通过动态添加<script>标签来绕过同源策略。因此，它有一些限制，例如不支持POST请求和复杂的数据交换。在实际开发中，如果可能的话，最好是通过服务器端代理来解决跨域问题，例如使用CORS（Cross-Origin Resource Sharing）头部来允许特定的跨域请求。

- 阅读更多 -

jquery的$怎么发起post请求并携带自定义请求头

System

2024-08-13

所有,jquery

在jQuery中，可以使用$.ajax方法来发起POST请求并携带自定义的请求头。以下是一个示例代码：




$.ajax({
    url: 'your-endpoint-url', // 目标URL
    type: 'POST', // 请求类型
    headers: {
        'Custom-Header': 'value' // 自定义请求头
    },
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(error);
    }
});

在这个例子中，我们设置了一个名为Custom-Header的自定义请求头，其值为value，然后通过data属性发送POST请求的数据。成功时，通过success回调处理响应；失败时，通过error回调处理错误。

System

2024-08-13

所有,jquery

以下是一个简化的Python Flask前后端框架的登录示例，使用了Bootstrap和JQuery来增强用户界面。

首先，安装所需的Flask包：




pip install Flask

下面是简单的Flask后端代码：




from flask import Flask, render_template, request, redirect, url_for
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    # 这里应该是进行用户验证的逻辑，例如查询数据库
    # 假设用户名和密码都是'user'
    if username == 'user' and password == 'user':
        return '登录成功'
    return '登录失败'
 
if __name__ == '__main__':
    app.run(debug=True)

以下是前端HTML和JavaScript代码，使用Bootstrap和JQuery：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#loginForm').submit(function(event) {
                event.preventDefault();
                $.post('/login', $(this).serialize(), function(response) {
                    $('#loginMessage').text(response);
                });
            });
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <h5 class="card-header">Login</h5>
                    <div class="card-body">
                        <form id="loginForm">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" class="form-control" id="username" name="username">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" id="password" name="password">
                            </d

- 阅读更多 -