前端技术的miniui 和bootstartp
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
欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~