前端技术的miniui 和bootstartp

news2024/11/13 11:19:58

前端技术的miniui 和bootstartp

  • 目录
    • 概述
      • 需求:
    • 设计思路
    • 实现思路分析
      • 1.前端技术boostatrp
      • 2.miniui:
  • 参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

在这里插入图片描述

概述

前端技术的miniui 和bootstartp

需求:

设计思路

实现思路分析

1.前端技术boostatrp

https://v4.bootcss.com/
bootstrap.css:Bootstrap核心样式【添加到head标签中】
jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.js:Bootstrap核心库:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>栅格系统</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script src="js/bootstrap.js" type="text/javascript"></script>
		<style type="text/css">
			.container {
				background-color: #007BFF;
			}
 
			.aa {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 一行中显示三个区域 -->
			<div class="row">
				<!-- <div class="col-md-4 aa">123</div>
				<div class="col-md-4 aa">456</div>
				<div class="col-md-4 aa">789</div> -->
				<!-- 平板端 -->
				<div class="col-md-4 col-sm-6 aa">123</div>
				<div class="col-md-4 col-sm-6 aa">456</div>
				<div class="col-md-4 col-sm-6 aa">789</div>
				<!-- 行内加 -->
				<div class="row">
					<div class="col aa">1</div>
					<div class="col aa">2</div>
					<div class="col aa">3</div>
				</div>
			</div>
		</div>
	</body>
</html>

2.miniui:

2020 年接触了miniui:而后都接触的是vue 技术:
Jqueryminiui 的封装 :
http://www.miniui.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagination 分页表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <script src="js/ColumnsMenu.js" type="text/javascript"></script>
    
</head>
<body >
    <h1>Pagination 分页表格</h1>      

    <div style="padding-bottom:5px;">
        
        <span>员工姓名:</span><input type="text" id="key"  />
        <input type="button" value="查找" onclick="search()"/>
        
    </div>

<div id="datagrid1" class="mini-datagrid" style="width:100%;height:250px;" 
    url="../data/AjaxService.aspx?method=SearchEmployees"
    idField="id" allowResize="true"
    sizeList="[20,30,50,100]" pageSize="20" 
    showHeader="true" title="表格面板"
 onmouseup="return datagrid1_onmouseup()">
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>                                
        <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>




    <script type="text/javascript">
        
        mini.parse();
        
        var grid = mini.get("datagrid1");

        grid.load();

        var menu = new ColumnsMenu(grid);

        function search() {
            var key = document.getElementById("key").value;
            grid.load({ key: key});
        }
        $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
        ///
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
        function datagrid1_onmouseup() {

        }

    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>


  

</body>
</html>

参考资料和推荐阅读

1.https://blog.csdn.net/qq_64001795/article/details/124624012
2.http://www.miniui.com/demo/#src=datagrid/pager.html

欢迎阅读,各位老铁,如果对你有帮助,点个赞加个关注呗!~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/448826.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1686_MATLAB处理Excel文件

全部学习汇总&#xff1a; GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes servral …

opencv交叉编译,支持ffmpeg、libjpeg,实现取流及写入jpeg文件

一、准备工作 1、虚拟机交叉编译连 2、在虚拟机目录下创建工作目录&#xff0c;注意不要选择windows共享目录&#xff0c;比如这里选择&#xff1a; /home/cxyazhou/work 3、虚拟机安装cmake cmake-gui pkg-config&#xff0c;直接apt install即可 4、源码下载&#xff0c;需要…

Mongodb的部署

MongoDB下载包获取 https://www.mongodb.com/try/download/community 安装配置 第一步&#xff1a;在服务器 /usr/local 下创建 MongoDB 文件夹&#xff0c;用来存放安装包、服务以及之后 MongoDB 的数据库和日志文件。 cd /usr/local // 进入安装目录 mkdir MongoDB // 创…

【LeetCode: 2369. 检查数组是否存在有效划分 | 暴力递归=>记忆化搜索=>动态规划 | 线性dp】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

OpenCV(14)-OpenCV4.0中文文档学习2(补充)

相机校准和3D重建 相机校准 标定 findChessboardCorners() 它返回角点和阈值&#xff0c;如果成功找到所有角点&#xff0c;则返回 True。这些角落将按顺序放置&#xff08;从左到右&#xff0c;从上到下&#xff09;cornerSubPix()用以寻找图案&#xff0c;找到角点后也可以…

PHREEQC实践建模技术方法

PHREEQC软件为美国地质调查局基于C和C语言开发&#xff0c;面向一般地球化学、水文地球化学模拟的专业软件。该软件历经近30年迭代&#xff0c;功能不断完善&#xff0c;目前已发展成为-以PHREEQC为计算核心&#xff08;更新至3.7版本&#xff09;&#xff0c;辅以具备二次开发…

【无标题】docker安装jenkins安装流程(二)

配置Publish Over SSH JENKINS_URL/job/goods/build?tokenTOKEN_NAME http://xxxxx:8001/job/goods/job/goods/build?tokenxql1232.提交合并代码触发自动构建 http://xxxxx:8001/buildByToken/build?jobgoods&tokenxql123http://xxxxx:8001/buildByToken/build?jobgood…

Javaee 基于注解的AOP开发

基于注解的 aop 开发步骤&#xff1a; 1. 创建目标接口和目标类&#xff08;内部有切点&#xff09; 2. 创建切面类&#xff08;内部有增强方法&#xff09; 3. 将目标类和切面类的对象创建权交给 spring 4. 在切面类中使用注解配置织入关系 5. 在配置文件中开启组件…

gpt写文章批量写文章-gpt3中文生成教程

怎么用gpt写文章批量写文章 批量写作文章是很多网站、营销人员、编辑等需要的重要任务&#xff0c;GPT可以帮助您快速生成大量自然、通顺的文章。下面是一个简单的步骤介绍&#xff0c;告诉您如何使用GPT批量写作文章。 步骤1&#xff1a;选择好训练模型 首先&#xff0c;选…

14、RPC与gRPC

目录 一、rpc基础1 - rpc入门2 - 基础的rpc通信3 - 基于接口的RPC服务 二、rpc编码1 - gob编码2 - json on tcp3 - json on http&#xff08;待补充&#xff09; 三、prtotobuf编码1 - prtotobuf概述2 - protobuf编译器3 - 序列化和反序列化4 - 基于protobuf的RPC&#xff08;待…

TiDB实战篇-TiCDC

目录 简介 原理 使用场景 使用限制 硬件配置 部署 在安装TiDB的时候部署 扩容部署 操作 管理CDC 管理工具 查看状态 创建同步任务 公共参数 CDC任务同步到MySQL实战 同步命令 查看所有的同步任务 同步任务的状态 管理同步任务 查看一个同步信息的具体情况 …

腾讯云COS+ElmentUI+SpringBoot视频上传功能实现

文章目录 第一步&#xff1a;选择合适的组件并整合到项目中第二步&#xff1a;前端校验第三步&#xff1a;绑定上传成功方法第四步&#xff1a;腾讯云cos后端接口配置 今天在做项目的时候需要完成一个视频上传的功能&#xff0c;这里做一个记录&#xff01; 第一步&#xff1a;…

春秋云境:CVE-2022-25411(Maxsite CMS文件上传漏洞)

目录 一、题目 二、官方POC 一、题目 介绍&#xff1a; MaxSite CMS是俄国MaxSite CMS开源项目的一款网站内容管理系统 Maxsite CMS存在文件上传漏洞&#xff0c;攻击者可利用该漏洞通过精心制作的PHP文件执行任意代码。 进入题目&#xff1a; 发现是俄文 乌拉~~ 不过没…

MongoDB副本集

一、介绍 MongoDB副本集(Replica set)是一组MongoDB实例,它们都维护着相同的数据集合。MongoDB副本集是有自动故障恢复功能的主从集群,有一个Primary节点和一个或多个Secondary节点组成。副本集没有固定的主节点,当主节点发生故障时整个集群会选举一个主节点为系统提供服务…

6.S081——Lab3——page table

0.briefly speaking 这是6.S081 Fall 2021的第三个实验&#xff0c;是页表和虚拟内存相关的实验&#xff0c;在之前我们已经详细地阅读了Xv6内核中有关虚拟内存管理的源代码&#xff0c;现在就可以深入一下这个实验了。本实验分为如下三个小任务&#xff1a; Speed up system…

【Mac-m2芯片docker安装AWVS及问题解决】

【Mac-m2芯片docker安装AWVS及问题解决】 docker安装AWVS安装报错问题解决 docker安装 docker安装命令&#xff1a; brew install --cask --appdir/Applications docker 查看是否安装成功&#xff1a; docker --version docker info 换源&#xff1a; “https://hub-mirror.c.…

在Python中使用牛顿法

牛顿法简介 牛顿法&#xff08;Newton’s method&#xff09;是一种常用的优化算法&#xff0c;在机器学习中被广泛应用于求解函数的最小值。其基本思想是利用二次泰勒展开将目标函数近似为一个二次函数&#xff0c;并用该二次函数来指导搜索方向和步长的选择。 牛顿法需要计…

从零开始学架构——FMEA故障模式与影响分析

1 FMEA介绍 FMEA&#xff08;Failure mode and effects analysis&#xff0c;故障模式与影响分析&#xff09;又称为失效模式与后果分析、失效模式与效应分析、故障模式与后果分析等&#xff0c;专栏采用“故障模式与影响分析”&#xff0c;因为这个中文翻译更加符合可用性的语…

高并发的程序设计-系统设计层面

高并发的程序设计-系统设计层面 目录概述需求&#xff1a; 设计思路实现思路分析1.主要指标二、处理高并发的方案 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better …

ChatGPT写文章效果-ChatGPT写文章原创

ChatGPT写作程序&#xff1a;让文案创作更轻松 在当前数字化的时代&#xff0c;营销推广离不开文案创作。然而&#xff0c;写作对许多人来说可能是一项耗时而枯燥的任务。如果您曾经为写出较高质量的文案而苦恼过&#xff0c;那么ChatGPT写作程序正是为您而设计的。 ChatGPT是…