前端技术的miniui 和bootstartp

本文链接：https://blog.csdn.net/xiamaocheng/article/details/130307010

前端技术的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.

<!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>