HTML插件工具笔记

最新推荐文章于 2025-05-06 23:03:00 发布

原创最新推荐文章于 2025-05-06 23:03:00 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

本文介绍了两个实用插件：superTable用于灵活管理表格结构，BootstrapTable提供了丰富的表格配置；同时探讨了datetimepicker插件在日期选择中的应用。

一、表格插件
<table id = 'demoTable'></table>
插件1 superTable, 可实现表格行列冻结

<script>
    $(function() {
        new superTable("demoTable", {
            cssSkin: "sDefault",//表格皮肤，提供四套：sDefault、sOrange、sSky、sDark（黑背白字）
            headerRows: 1,//冻结行数
            fixedCols: 1//冻结列数
        });
    });
</script>

插件2bootstrapTable

<script>
    $("#demoTable").bootstrapTable({
        {#pagination: true,#}
        pageSize: {{ page_size }},
        paginationLoop: false,  //是否展示分页
        {#pageList: [15, 20, 50, 100, 200, 500],   //选择每页显示多少行#}
        {#search:true,#}
        showColumns: true,
        showToggle: true,	//
        cardView: false,   //顶部选项卡
        height:810,
        showRefresh:true,   //刷新按钮
        {#showPaginationSwitch:true, //数据条数选择框#}
        sortable:true,  //排序
    });
</script>

二、日期插件datetimepicker

<div class='input-group date' id='datetimepicker'>
     <input type='text' class="form-control"  id='datetime' >
           <span class="input-group-addon">
           		<span class="glyphicon glyphicon-calendar"></span>
           </span>
</div>
<input type="text" id="datetime" />

<script type="text/javascript">
   $("#datetimepicker").datetimepicker({
        format: 'YYYY-MM-DD HH',
        locale: moment.locale('zh-CN')
    });

    $("#datetime").datetimepicker({
        format: 'YYYY年MM月DD日HH时',  /* 时间格式 */
        locale: moment.locale('zh-CN')
    });
</script>