layui表格和弹出框的简单示例


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>demo</title>
<link rel="stylesheet" href="../Js/Content/layui/css/layui.css" />

</head>
<body>

    <div style="margin:20px">
        <table class="layui-hide" id="demo" lay-filter="demoFilter"></table>
    </div>

    <div class="editDiv" style="display:none;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">单行输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证必填项</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/html" id="tableLastTd">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="../Js/jquery.min.js"></script>
    <script src="../Js/Content/layui/layui.js"></script>
    <script>
    layui.use(‘table‘, function(){
        var table = layui.table;

        //展示已知数据
        table.render({
            elem: ‘#demo‘
          ,cols: [[ //标题栏
            {field: ‘id‘, title: ‘ID‘, width: 80, sort: true}
            ,{field: ‘username‘, title: ‘用户名‘, width: 120}
            ,{field: ‘email‘, title: ‘邮箱‘, minWidth: 150}
            ,{field: ‘sign‘, title: ‘签名‘, minWidth: 160}
            ,{field: ‘sex‘, title: ‘性别‘, width: 80}
            ,{field: ‘city‘, title: ‘城市‘, width: 100}
            , { field: ‘experience‘, title: ‘积分‘, width: 80, sort: true }
            , { field: ‘set‘, title: ‘操作‘, templet: "#tableLastTd", width: 180 }
          ]]
          ,data: [{
              "id": "10001"
            ,"username": "杜甫"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "116"
            ,"ip": "192.168.0.8"
            ,"logins": "108"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10002"
            ,"username": "李白"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
            ,"LAY_CHECKED": true
          }, {
              "id": "10003"
            ,"username": "王勃"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "65"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10004"
            ,"username": "贤心"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "666"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10005"
            ,"username": "贤心"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "86"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10006"
            ,"username": "贤心"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10007"
            ,"username": "贤心"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "16"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }, {
              "id": "10008"
            ,"username": "贤心"
            ,"email": "[email protected]"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "106"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
          }]
            //,skin: ‘line‘ //表格风格
          ,even: true
            //,page: true //是否显示分页
            //,limits: [5, 7, 10]
            //,limit: 5 //每页默认显示的数量
        });

        table.on(‘tool(demoFilter)‘, function (obj) {

            if (obj.event === ‘del‘) {
                layer.confirm(‘确定要删除该条数据吗‘, function (index) {
                    layer.msg("正在删除啦....", { icon: 1, time: 1000 });
                    return;
                });
            } else if (obj.event === "edit") {
                layer.open({
                    title: ‘编辑此条信息‘,
                    type: 1,
                    move: false,
                    content: $(‘.editDiv‘),
                    area: [‘90%‘, ‘90%‘],
                    resize: false,
                    scrollbar: false
                });
            }

        })

    });
    </script>

</body>
</html>

原文地址:https://www.cnblogs.com/sxs161028/p/9186489.html

时间: 2024-10-15 04:31:43

layui表格和弹出框的简单示例的相关文章

js按钮确认删除提示以及js的三种弹出框简单介绍

js按钮确认删除提示 第一种方法: html代码: 1 <a href="" οnclick="javascript:return del();">删除</a> js代码: 1 function del() { 2 var msg = "您真的确定要删除吗?\n\n请确认!"; 3 if (confirm(msg)==true){ 4 return true; 5 }else{ 6 return false; 7 } 8

java生成excel表格和pdf并实现下载弹出框

今天在pdf和excel中都实现了在浏览器弹出下载框 将之前在网上查找的生成excel表格代码稍微修改下: public class CreateSimpleExcelToDisk { /** * @功能:手工构建一个简单格式的Excel */ private static List<News> getNews() throws Exception { List<News> data = new ArrayList<News>(); NewsDao dao = new

自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计

table表格,选择框 form id="editForm1"> <table class="table_form"> <td >经济性质:</td> <td > <input width="150" type="text" id="nature_id" readonly onclick="show_nature()">

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

嫌弃浏览器自带弹出框,写个简单的jq自定义弹窗插件

最近做项目写个表单验证,提交信息验证有错误的时候,用了最懒的方法,直接把错误提示用alert()弹出框弹出来,于是老大看完后给了这个表情... 确实,自带弹窗样式丑不能自定义这些问题困扰着很多用户,而且在同浏览器有不同的表现, 有这样的:.. 有这样的:.. 还有这样的:.. 还有这样的: 相信做前端的都很熟悉这些面孔~ 不统一风格的弹窗直接拉低了整个网站的逼格.. 好,那就写个简单的JQ插件来装饰一下吧. JQ插件标准的封装代码如下,首先需要闭包: <script type="text/

Cocos2d-x lua 封装的一个简单弹出框

..有2种类型:只有确定按钮.有确定和取消按钮 确定和取消按钮中的确定可以执行回调函数,标签可以自动换行,前提是在IOS模拟器上运行,mac下的模拟器看不出效果,功能比较简单,基本功能是实现了,交互上不是很好,还得改进,点击对话框外面的区域,对话框也会消失,可自行修改实现自己的需求. 继承于Layer,用类的方式写的,写的不是很好,望大神们多多指教. 代码奉上,比较简单: require "Cocos2d" require "Cocos2dConstants" --

代码录播:jQueryMobile 实现一个简单的弹出框效果

今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com

一个简单的弹出框组件

个人写这个弹出框的原因就一个,就是能给我带来可复用,追求新,要简单,可扩展.要达到炫酷有点难度,分析后还是决定以功能为主,因为是用jq和animation实现的弹出框组件,所以看起来难度不大,简称co-dialog. 灵感来源,因为工作中用到dialog,发现UI设计的弹出框的风格一直在变化,于是每次都要重新写一个弹出框,无意中增加了无用的工作量,所以果断就封装成一个弹出框组件,目前的锥形仅支持PC,然后又加入了CSS3动画效果,如果要引入动画效果就需要高版本的Browser才能使用,期望你能一

ABAP分享一 弹出框函数的简单示例

在开发中经常会使用到弹出框这个功能,在SAP中有很多函数可以实现类似的功能,这里介绍一个比较简单常用的函数  POPUP_TO_CONFIRM 下面是一个实现的简单示例: TABLES sscrfields. DATA: qus TYPE string,           ans TYPE c.    " 根据用户的操作会有三个值   1   是   ,  2   否  ,  A   取消 SELECTION-SCREEN:BEGIN OF BLOCK abs WITH FRAME TITLE