文档章节

table常用类型封装

GZhiDao
 GZhiDao
发布于 2016/10/14 11:18
字数 1125
阅读 25
收藏 0
<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="640">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="modeName=750-12" name="grid" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
     <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
     <script type="text/javascript" src="js/table.js"></script>
</head>

<body>
    <div class="searchBox">
        <input type="text" class="searchText" placeholder="搜索内容">
        <a href="javascript:;" class="searchBtn search">搜索</a>
    </div>
    <div class="selectBox">
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
        </select>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>编号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" data-id="1">
                </td>
                <td>1</td>
                <td>2</td>
                <td>
                    <a href="javascript:;" class="blue edit" data-id="1">编辑</a>
                    <a href="javascript:;" class="green look" data-id="1">查看</a>
                    <a href="javascript:;" class="orange" data-id="1">查看2</a>
                    <a href="javascript:;" class="red delete" data-id="1">删除</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" data-id="2">
                </td>
                <td>1</td>
                <td>2</td>
                <td>
                    <a href="javascript:;" class="blue edit" data-id="1">编辑</a>
                    <a href="javascript:;" class="green look" data-id="1">查看</a>
                    <a href="javascript:;" class="orange" data-id="1">查看2</a>
                    <a href="javascript:;" class="red delete" data-id="1">删除</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <a class="checkAll" href="javascript:;">全选</a>
                    <a class="uncheckAll" href="javascript:;">取消</a>
                    <a class="editAll" href="javascript:;">删除</a>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="editRow">
        <div class="left"><span class="redTips">*</span>旅行社电话:</div>
        <div class="right">
            <input type="text" class="inputText placeholder" />
        </div>
    </div>

    <div class="editRow"><!-- text -->
        <div class="left"><span class="redTips">*</span>旅行社电话:</div>
        <div class="right">
            <input type="text" class="inputText placeholder" />
        </div>
    </div> <!-- text end-->

    <div class="editRow"> <!-- checkbox -->
        <div class="left"><span class="redTips">*</span>旅行社电话:</div>
        <div class="right">
            <input type="checkbox" />选择1
            <input type="checkbox" />选择1
        </div>
    </div><!-- checkbox end-->

    <div class="editRow"> <!-- selectBox -->
        <div class="left"><span class="redTips">*</span>旅行社电话:</div>
        <div class="right selectBox">
            <select name="" id="">
                <option value="">1</option>
                <option value="">2</option>
            </select>
        </div>
    </div><!-- selectBox end-->

    <div class="editRow"><!-- textarea -->
        <div class="left"><span class="redTips">*</span>旅行社电话:</div>
        <div class="right">
           <textarea  id="" class="textarea placeholder"></textarea>
        </div>
    </div><!-- textarea end-->
    
    <div class="radioBox"><!-- radioBox -->
        <div class="editRow">
            <div class="left"><span class="redTips">*</span>是否开启:</div>
            <div class="right">
               <input type="radio" class="radioBtn" name="radio1" checked="checked" value="0">开启
               <input type="radio" class="radioBtn" name="radio1" value="1">关闭
            </div>
        </div>
        <div class="editRow hide">
            <div class="left"><span class="redTips">*</span>旅行社电话:</div>
            <div class="right">
                <input type="text" class="inputText placeholder" />
            </div>
        </div>
    </div><!-- radioBox end-->
    
    <div class="radioBox"><!-- radioBox -->
        <div class="editRow">
            <div class="left"><span class="redTips">*</span>是否开启:</div>
            <div class="right">
               <input type="radio" class="radioBtn" name="radio2" checked="checked" value="0">开启
               <input type="radio" class="radioBtn" name="radio2" value="1">关闭
            </div>
        </div>
        <div class="editRow hide">
            <div class="left"><span class="redTips">*</span>旅行社电话:</div>
            <div class="right">
                <input type="text" class="inputText placeholder" />
            </div>
        </div>
    </div><!-- radioBox end-->
    <script>
        $(function(){
            $(document).on('click','.radioBox .radioBtn',function(){
                var _this = $(this);
                table.radioBox(_this);
            })
        })
    </script>

    <div class="addRowBox">  <!-- addRowBox -->
        <input type="hidden" class="limite" value="4"><!--添加的上限 +1 -->
        <a href="javascript:;" class="add">添加</a>
        <div class="appendBox">
            <div class="row" id="row_1">
                <h1>row1</h1>
                <a href="javascript:;" class="delete" data-id='1'>删除</a>
            </div>
            <div class="row" id="row_2">
                <h1>row1</h1>
                <a href="javascript:;" class="delete" data-id='2'>删除</a>
            </div>
        </div>
    </div> <!-- addRowBox end-->
    <script>
        $(function(){
            //动态添加删除
            var _nums=0,_flags=10;
            $(document).on('click','.addRowBox .add',function(){
                var limite = $(this).parents('.addRowBox').find('.limite').val(); //获取上限
                var haveRows = $(this).parents('.addRowBox').find('.row').length; //已存在number
                var actual = parseInt(limite) - parseInt(haveRows); //实际添加的number
                _flags++;
                if(_nums<actual){
                    var html='';
                    html+='<div class="row" id="row_'+_flags+'">'+
                    '<h1>row1</h1>'+
                    '<a href="javascript:;" class="delete" data-id='+_flags+'>删除</a>'+
                    '</div>';
                    _nums++;
                    $(this).parents('.addRowBox').find('.appendBox').append(html);
                }else{
                    console.log('超过上限');
                    return;
                }
            }).on('click','.addRowBox .delete',function(){
                var id = $(this).data('id');
                _nums--;
                $(this).parents('.addRowBox').find('#row_'+ id +'').remove();
            });
            //动态添加删除 end
        })
    </script>

   
    <script type="text/javascript" src="js/layer/layer.js"></script>
    
    <script type="text/javascript" src="js/mobileCheckout.js"></script>
    <script type="text/javascript">
    $(function() {
        // 为input 循环输出  placeholder
        var inputArray = $('.editRow').find('.placeholder');
        var inputPlaceHolder = [
            "111111","222222","333"
        ];
        table.placeholder(inputArray,inputPlaceHolder);
        // 为input 循环输出  placeholder   end
        

        $(document).on('click', '.checkAll', function() { //全选
                table.check('tbody input[type="checkbox"]', 0)
            })
            .on('click', '.uncheckAll', function() { //取消全选
                table.check('tbody input[type="checkbox"]', 1)
            })
            .on('click', '.edit', function() { //单个操作
                var _this = $(this),
                    id = _this.data('id'),
                    pageNum = _this.data('pagenum'),
                    url = 'tour/' + id + '/delTourMain.do',
                    reload = 'tour/manageTour.do?pageNum=' + pageNum;

                table.edit('.edit', '删除', url, reload);
            })
            .on('click', '.editAll', function() { //批量操作
                var _this = $(this),
                    id = _this.data('id'),
                    pageNum = _this.data('pagenum'),
                    url = 'tour/' + id + '/delTourMain.do',
                    reload = 'tour/manageTour.do?pageNum=' + pageNum,
                    grounps = null,
                    data = {};
                grounps = table.getCheckboxs($('tbody input[type="checkbox"]'));
                data.mainIds = grounps; //JSON.stringify(data) --> {"mainIds":["0","1","2"]}
                table.editAll(grounps, '删除', data, url, reload);
            })
            .on('click', '.search', function() { //搜索
                var text = $('.text').val();
                var params = {
                    "name": text
                };
                var isSpace = mobile.isSpace(text, 20); //验证是否为空格or空 返回:true or false

                /*if(isSpace == false){
                    console.log('请输入正确内容')
                    return;
                }*/
                var isLimit = table.isLimit(text, 3);
                if (!table.isLimit(text, 3)) {
                    console.log('错误isLimit')
                    return;
                } else {
                    console.log('正确isLimit')
                    return;
                }
                table.search(params, 'tour/0/searchTour.do?');
            })
    })
    </script>
</body>

</html>

 

© 著作权归作者所有

GZhiDao
粉丝 6
博文 119
码字总数 89796
作品 0
广州
前端工程师
私信 提问
关于 Vue render jsx 与 template 的实践总结

场景 iview Table 单元格数据是一个下拉选择框 起初直接 render 了一个经过二次封装的 iview Dropdown 组件,在接入后台数据后发现-等待请求返回数据造成一定时间延缓而不能正常 render 这个...

Yolanda177
昨天
0
0
Hutool之对JDBC的ORM封装

开篇 端午没事儿干扩充了下Hutool的DB部分,原来只是一个简单的SQL运行器,现在加入了方言支持,封装了增删改查,引入Session从而支持事务,可以说工程量巨大,在封装过程总我还是参考了Jod...

路小磊
2014/06/03
1K
0
C++ 封装的 Lua 扩展库--fflua

在使用C++做服务器开发中,经常会使用到脚本技术,Lua是最优秀的嵌入式脚本之一。Lua的轻量、小巧、概念之简单,都使他变得越来越受欢迎。本人也使用过python做嵌入式脚本,二者各有特点,今...

EvanZhaoOwn
2014/12/11
9.5K
4
Lua基础之table详解

概要:1.table特性;2.table的构造;3.table常用函数;4.table遍历;5.table面向对象 原文地址:http://blog.csdn.net/dingkun520wy/article/details/50231603 1.table特性 table是一个“关联...

乐逍遥jun
2016/02/22
67
0
j2ee应用快速开发手架--thinker

thinker(像一个思想者一样去写代码) 介绍 工作中的积累,搭建的j2ee应用快速开发手架,重点在代码重构,一些常用功能的演示,工具,插件等的整理 github gitoschina 个人博客:http://www.rg...

guess
2014/04/25
10.2K
7

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部