精华内容
下载资源
问答
  • javascript如何创建表格(javascript绘制表格的二方法)
    千次阅读
    2021-03-22 12:39:11

    javascript如何创建表格(javascript绘制表格的二种方法)

    利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法

     

    1、inserRow()和insertCell()函数

    insertRow()函数可以带参数,形式如下:

    insertRow(index):index从0开始

    这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

    insertCell()和insertRow的用法相同,这里就不再说了。

    2、deleteRow()和deleteCell()方法

    deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始

    和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:

     

    复制代码代码如下:


    var row=document.getElementById("行的Id");
    var index=row.rowIndex;//有这个属性,嘿嘿
    objTable.deleteRow(index);

     

    在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:

     

    复制代码代码如下:


    function clearRow(){
       objTable= document.getElementById("myTable");

       for( var i=1; i<objTable.rows.length ; i++ )
       {
       tblObj.deleteRow(i);   
          }
    }

     

    这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:

     

    复制代码代码如下:


    function clearRow(){
       objTable= document.getElementById("myTable");
       var length= objTable.rows.length ;
       for( var i=1; i<length; i++ )
       {
           objTable.deleteRow(i);   
          }
    }

    相关文章:http://www.jieba8.com/

    3、动态设置单元格与行的属性

    A、采用setAttribute()方法,格式如下:setAttribute(属性,属性值)

    说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:1

     

    复制代码代码如下:


    var objMyTable = document.getElementById("myTable");

     

    objMyTable.setAttribute("border",1);//为表格设置边框为1

     

    其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法

     

    复制代码代码如下:


    var objCell = document.getElementById("myCell");

     

    objCell.setAttribute("height",24);//为单元格设置高度为24

     

    在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵呵,大家自己摸索吧。

    B、直接赋值

     

    复制代码代码如下:


    var objMyTable = document.getElementById("myTable");

     

    objMyTable.border=1;//为表格设置边框为1

     

    这个方法也全部适用,呵呵。

    4、创建表格

    了解了行<tr>与单元格<td>的增删那就可以创建表格了。

    第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable

     

    复制代码代码如下:


    var objMyTable = document.getElementById("myTable");

     

    第二步:创建行与列的对象

     

    复制代码代码如下:


    var index = objMyTable.rows.length-1;
    var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的

     

    //单元格箱号
    var newCellCartonNo = nextRow.insertCell();
    var cartonNoName = "IptCartonNo";
    newCellCartonNo.innerHTML = "&nbsp;<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
    newCellCartonNo.setAttribute("className","tablerdd");

     

    这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~

     

    复制代码代码如下:


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>蓝光-BlueShine</title>
    <script language="JavaScript">
    var Count=false,NO=1;
    function addRow(){
    Count=!Count;
    //添加一行
    var newTr = testTbl.insertRow(testTbl.rows.length);
    //添加两列
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();
    var newTd2 = newTr.insertCell();
    //设置列内容和属性
    if(Count){newTr.style.background="#FFE1FF";}
    else {newTr.style.background="#FFEFD5";}
    newTd0.innerHTML = '<input type=checkbox id="box4">';
    NO++
    newTd1.innerText="第"+ NO+"行";
    }
    </script>
    </head>

     

    <body>
    <table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
    <tr bgcolor="#FFEFD5">
    <td width=6%><input type=checkbox id="box1"></td>
    <td >第1行</td>
    <td > </td>
    </tr>
    </table>
    <label>
    <input type="button" value="插入行" οnclick="addRow()" />
    </label>
    </body>
    </html>

     

    5、appendChild()方法

     

    复制代码代码如下:


    <html>
    <head>
    <title>My Test Page</title>
    <script type="text/javascript">
    <!--
    var textNumber = 1;
    function addTextBox(form, afterElement) {
    // Increment the textbox number
    textNumber++;
    // Create the label
    var label = document.createElement("label");
    // Create the textbox
    var textField = document.createElement("input");
    textField.setAttribute("type","text");
    textField.setAttribute("name","txt"+textNumber);
    textField.setAttribute("id","txt"+textNumber);
    // Add the label's text
    label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
    // Put the textbox inside
    label.appendChild(textField);
    // Add it all to the form
    form.insertBefore(label,afterElement);
    return false;
    }
    function removeTextBox(form) {
    if (textNumber > 1) { // If there's more than one text box
        // Remove the last one added
        form.removeChild(document.getElementById("txt"+textNumber).parentNode);
        textNumber--;
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    label {
    display:block;
    margin:.25em 0em;
    }
    -->
    </style>
    </head>
    <body>
    <form id="myForm" method="get" action="./" />
    <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
    <p>
        <input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
        <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
    </p>
    <p><input type="Submit" value="Submit" /></p>
    </form>
    </body>
    </html>

     

    <html>
    <head>
    <title>My Test Page</title>
    <script type="text/javascript">
    <!--
    var textNumber = 1;
    function addTextBox(form, afterElement) {
    // Increment the textbox number
    textNumber++;
    // Create the label
    var label = document.createElement("label");
    // Create the textbox
    var textField = document.createElement("input");
    textField.setAttribute("type","text");
    textField.setAttribute("name","txt"+textNumber);
    textField.setAttribute("id","txt"+textNumber);
    // Add the label's text
    label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
    // Put the textbox inside
    label.appendChild(textField);
    // Add it all to the form
    form.insertBefore(label,afterElement);
    return false;
    }
    function removeTextBox(form) {
    if (textNumber > 1) { // If there's more than one text box
        // Remove the last one added
        form.removeChild(document.getElementById("txt"+textNumber).parentNode);
        textNumber--;
    }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    label {
    display:block;
    margin:.25em 0em;
    }
    -->
    </style>
    </head>
    <body>
    <form id="myForm" method="get" action="./" />
    <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
    <p>
        <input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
        <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
    </p>
    <p><input type="Submit" value="Submit" /></p>
    </form>
    </body>
    </html>

    参考文章:http://www.xdy666.com/

                      http://www.xitong5s.com/

     

    更多相关内容
  • WPS表格 的快捷键,快捷出我想要看到的某个字,如网页上的ctrl+Fwps常用快捷键有哪些?★电脑键盘快捷键、组合键功能使用大全 WPS... ● wps文字常用快捷键: 创建新文档 Ctrl+N或者A怎样把WPS表格存到桌面?将保存位...

    WPS表格 的快捷键,快捷出我想要看到的某个字,如网页上的ctrl+F

    wps常用快捷键有哪些?

    ★电脑键盘快捷键、组合键功能使用大全 WPS系列软件一共包含了WPS文字、wps表格和wps演示三款软件,下面是wps常用快捷键介绍 WPS快捷键大全。包含wps文字、wps表格、wps演示快捷键大全,详情如下。 ● wps文字常用快捷键: 创建新文档 Ctrl+N或者A

    37496abc599e43b30fce64b0c3b1a375.gif

    怎样把WPS表格存到桌面?

    将保存位置选为桌面即可,具体步骤如下:

    点击另存为,页面会弹出一个窗口,询问保存路径,如下图

    在窗口左侧一栏中,找到:桌面,点击它。

    wps表格显示的是快捷方式

    Ctrl+S保存Ctrl+W关闭程序Ctrl+N新建Ctrl+O打开Ctrl+Z撤销Ctrl+F查找Ctrl+X剪切Ctrl+C复制Ctrl+V粘贴Ctrl+A全选Ctrl+[缩小文字Ctrl+]放大文字Ctrl+B粗体Ctrl+I斜体Ctrl+U下划线Ctrl+Shift输入法切换Ctrl+空格中英文切换Ctrl+回车QQ号中发送信息C

    WPS云服务表格快捷方式放到桌面上怎么放?WPS云服务表格快捷方式放到桌面上怎么放,当在桌面打开之后还是云表格状态.

    我很早建立一个wps表格,今天我进桌面上的快捷方式打开WPS表格,在左上角有一个WPS表格,点开,最下面有一个备份,去那找找吧,,。

    WPS表格怎么自己设置快捷键?很遗憾,wps2012以来,只能设置快速启动栏上的按钮,不能自己设置快捷键。

    展开全文
  • 最近在写一个商品分类管理的功能,本来想用layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的...

    最近在写一个商品分类管理的功能,本来想用layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点不适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的要求,特此将使用方法以及其中遇到的一些坑记录下来。。。

    首先看下treeTable的

    演示地址

    项目地址

    好了,如果看完演示到这里你觉得正好符合你的功能要求,就可以继续往下看了,

    虽然项目地址中已经把使用介绍的很详细了,但是我在这里要补充一下我遇到的坑:

    使用方法

    1,引入模块

    打开项目地址,将整个项目下载下来,项目中其他文件可以参考,我们主要用的就是treetable-lay这个文件夹的内容。
    在这里插入图片描述
    下载好项目后把treetable-lay放在我们自己项目的任意位置,但是尽量和layui文件夹放一块,好找!
    下面是我放的位置,如图所示:

    在这里插入图片描述

    2,初始化模块配置

    要扩展layui的模块使用我们引入的js模块,注意base路径是treetable-lay文件夹所在的父路径,这里出错会报404,extend内容最好不要改。
    下面我先每个重点注意事项单独列出来,最后放完整代码。

       layui.config({
            base: '${pageContext.request.contextPath}/layuiadmin/modules/' //   资源所在路径
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['treetable', 'table', 'layer'], function () {
            var treetable = layui.treetable;
            var layer = layui.layer;
            var table = layui.table;
            var $ = layui.jquery;
    });
    

    如下图所示:
    在这里插入图片描述

    3,动态渲染表格

    数据是从后台查询出来,数据格式不需要做处理,只需要查询所有就行了,官方文档给了json格式,我自己也做了一个简单的封装,一会儿再说json格式。

    这里要注意的是treeIdName和treePidName这两个属性,要对应自己查询出来的id和pid。支持自定义这点非常好

     <%--树形表格--%>
     <table class="layui-table" id="Lay_category_treeTable" lay-filter="Lay_category_treeTable"></table>
        
        //js如下:
        layui.use(['treetable', 'table', 'layer'], function () {
            var treetable = layui.treetable;
            var layer = layui.layer;
            var table = layui.table;
            var $ = layui.jquery;
    
            var re;
            // 渲染表格
            var renderTable = function () {
                layer.load(3);    //这里好像是要加载几层 ,我的是3层,就写了个3,
                re = treetable.render({
                    elem: '#Lay_category_treeTable',
                    url: '${basepath}/goodscategory/selectTreeTable',
                    treeColIndex: 1,          // 树形图标显示在第几列
                    treeSpid: 0,             // 最上级的父级id
                    treeIdName: 'classId',       // 	id字段的名称
                    treePidName: 'parentId',    // 	pid字段的名称
                    treeDefaultClose: true,     //是否默认折叠
                    page: false,
                    //treeLinkage: true,      //父级展开时是否自动展开所有子级
                    cols: [[
                        {type: 'numbers'},
                        {title: "分类名称", field: "className",align:"left"},
                        {title: "分类编码", field: "classCode"},
                        //  {title: "分类层级", field: "classIdLevel"},
                        {title: "分类状态", field: "classIdStatus",templet: '#classIdStatusTpl'},
                        {title: "创建人", field: "createUser"},
                        {
                            title: "创建时间",
                            field: "createTime",
                            templet: '<div>{{# if(d.createTime!=null){ }} {{ layui.util.toDateString(d.createTime,\'yyyy-MM-dd HH:mm:ss\')  }} {{# } }}</div>'
                        },
                        {title: "更新人员", field: "updateUser"},
                        {
                            title: "更新时间",
                            field: "updateTime",
                            templet: '<div>{{# if(d.updateTime!=null){ }} {{ layui.util.toDateString(d.updateTime,\'yyyy-MM-dd HH:mm:ss\')  }} {{# } }}</div>'
                        },
                        {title: "操作", templet: "#updateAndDelete"}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                })
            };
    

    可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段,
    跟layui数据表格的使用方式一致。

    4,参数说明,(这里直接复制官方的)

    layui数据表格的所有参数都可以用,除此之外treetable新增的参数有:

    参数类型是否必填描述
    treeColIndexint树形图标显示在第几列
    treeSpidobject最上级的父级id
    treeIdNamestringid字段的名称
    treePidNamestringpid字段的名称
    treeDefaultCloseboolean是否默认折叠
    treeLinkageboolean父级展开时是否自动展开所有子级

    treeColIndex

     树形图标(箭头和文件夹、文件的图标)显示在第几列, 索引值是cols数组的下标。

    treeSpid

     最上级的父级id,比如你可以规定pid为0或-1的是最顶级的目录。

    treeIdName

     treetable是以id和pid字段来渲染树形结构的,如果你的数据没有id和pid字段,你可以指定id和pid字段的名称。

    treePidName

     pid在你的数据字段中的名称。

    treeDefaultClose

     默认是全部展开的,如果需要默认全部关闭,加上treeDefaultClose:true即可。

    treeLinkage

     父级展开时是否自动展开所有子级

    注意事项

    • 不能使用分页功能,即使写了page:true,也会忽略该参数。
    • 不能使用排序功能,不要开启排序功能。
    • table.reload()不能实现刷新,请参考demo的刷新。
    • 除了文档上写的treetable.xxx的方法之外,其他数据表格的方法都使用table.xxx。
    • 建议删除和修改请求完后台之后请刷新(重新渲染)表格,最好不要使用obj.delete方式删除。

    5,其他方法

    这里除了layui的方法新增的方法有展开所有,折叠所有,刷新表格 ,三种方法,使用方法如下:

     <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn" id="btn-fold">全部折叠</button>
                <button class="layui-btn" id="btn-refresh">刷新表格</button>
     </div>
    
    	 renderTable();   //这个就是上面的渲染表格 var renderTable = function () {...}
            //展开所有
            $('#btn-expand').click(function () {
                //alert(0)
                treetable.expandAll('#Lay_category_treeTable');
            });
            //折叠所有
            $('#btn-fold').click(function () {
               // alert(1)
                treetable.foldAll('#Lay_category_treeTable');
            });
            //刷新表格
            $('#btn-refresh').click(function () {
                renderTable();
            });
    
    

    6,content图标。

    图标这个从gitee码云的源码上看吧,不再详细说,也没啥可说的。

    7,我遇到的坑

    我照着他给的教程一步步弄下来页面也显示出来了,但就是不能折叠,不管是我用折叠方法还是点那个三角图片还是设置为默认折叠,就是不管用,
    不能折叠,可把我给气坏了。
    苦思冥想找不到问题,最后我去研究treetable.js这个文件

    发现其中有一段代码他给注释掉了,如下图所示:
    在这里插入图片描述
    然后我把注释的这一段代码打开,哎,好了,展开折叠正常了,不知道什么原因,不知道有没有其他人遇到过。。。

    最后,分享一下我写的不成熟的这个页面的功能汇总,做个记录:

    主要功能有,树形表格展示,添加,修改,删除,批量删除,搜索,layui时间日期自定义格式列,表格全部展开、折叠、刷新表格等功能,有兴趣的看下吧~~
    效果图如下所示:
    在这里插入图片描述
    全部代码在这~:

    <%--
      Created by IntelliJ IDEA.
      User: Administrator
      Date: 2019/9/23
      Time: 13:25
      To change this template use File | Settings | File Templates.
    --%>
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ include file="../meta.jsp" %>
    <html>
    <head>
        <title>商品分类管理</title>
        <link rel="stylesheet" href="${basepath}layuiadmin/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="${basepath}layuiadmin/modules/treetable-lay/treetable.css">
        <script type="text/javascript" src="${basepath}js/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="${basepath}js/cookies.js"></script>
        <script type="text/javascript" src="${basepath}layuiadmin/layui/layui.js"></script>
        <script type="text/javascript" src="${basepath}layuiadmin/modules/treetable-lay/treetable.js"></script>
        <style type="text/css">
            .layui-table-cell {
                height: auto;
                line-height: 30px;
            }
    
        </style>
    
    </head>
    <body>
    <div class="layui-card-body">
        <div style="padding-bottom: 10px;" id="LAY_lay_add">
            <button type="button" class="layui-btn layui-btn-danger" onclick="doMultiDelete()">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
            <button class="layui-btn layuiadmin-btn-role " data-type="add" onclick="toOpenAddLayer()">
                <i class="layui-icon layui-icon-add-circle-fine"></i> 添加
            </button>
            &nbsp;
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="search" id="Lay_toSearch_input" placeholder="请输入分类名称" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn layui-btn-normal" id="btn-search"<%-- onclick="doSearch()"--%>>
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
            &nbsp;
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn" id="btn-fold">全部折叠</button>
                <button class="layui-btn" id="btn-refresh">刷新表格</button>
            </div>
            <%--
                    <button type="button" class="layui-btn layui-btn-normal  change-icon">随机更换小图标</button>
            --%>
        </div>
    
        <%--树形表格--%>
        <table class="layui-table" id="Lay_category_treeTable" lay-filter="Lay_category_treeTable"></table>
    
        <%--树形菜单--%>
        <div id="Lay_category_tree" lay-filter="Lay_category_tree"></div>
    
        <%--Table表格--%>
        <%-- <table id="Lay_back_table" lay-filter="Lay_back_table"></table>--%>
    
    
    </div>
    
    <script type="text/html" id="updateAndDelete">
        <button type="button" class="layui-btn  layui-btn-normal" onclick="toOpenUpdateLayer('{{d.classId}}')">
            <i class="layui-icon layui-icon-edit"></i>修改
        </button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="doDelete('{{d.classId}}')">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>
    </script>
    
    <%--弹出层--%>
    
    <form id="addForm" class="layui-form">
        <div class="layui-form" lay-filter="layuiconfig-form-role" id="layuiconfig-form-role"
             style="padding: 20px 30px 0 0;display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input name="className" id="className" class="layui-input">
                    <input name="classId" id="classId" lay-type="hide" type="hidden" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类编码</label>
                <div class="layui-input-block">
                    <input name="classCode" id="classCode" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" value="1" checked name="classIdStatus"
                           id="classIdStatus" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item" id="Lay_select_Level">
                <label class="layui-form-label">请选择分类级别</label>
                <div class="layui-input-block">
                    <select name="classIdLevel" lay-verify="required" lay-filter="classIdLevel">
                        <option value=""></option>
                        <option value="1" selected>一级分类</option>
                        <option value="2">二级分类</option>
                        <option value="3">三级分类</option>
                    </select>
                </div>
            </div>
    
    
            <div class="layui-form-item" style="display: none" id="Lay_One_Level">
                <label class="layui-form-label">请选择所属的一级分类</label>
                <div class="layui-input-block">
                    <select name="parentId" id="parentId"  lay-filter="parent_classIdLevel_One">
                        <option value=""></option>
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item" style="display: none" id="Lay_Two_Level" >
                <label class="layui-form-label">请选择所属的二级分类</label>
                <div class="layui-input-block">
                    <select name="parentId2" id="Two_parentId"  lay-filter="parent_classIdLevel_Two">
                        <option value=""></option>
                    </select>
                </div>
            </div>
    
    
            <div class="layui-form-item" style="text-align: right">
                <button class="layui-btn " lay-submit lay-filter="LAY-sysconfig-submit" id="LAY-sysconfig-submit">确认添加
                </button>
                <button lay-submit lay-filter="updateSubmitBtn" class="layui-btn" id="updateSubmitBtn">确认修改</button>
    
            </div>
        </div>
    </form>
    
    <script type="text/html" id="classIdStatusTpl">
        {{#  if(d.classIdStatus==1){ }}
        启用
        {{#  } else { }}
        <i style="color: red;">禁用</i>
        {{#  } }}
    </script>
    
    <script type="text/javascript">
    
        layui.config({
            base: '${pageContext.request.contextPath}/layuiadmin/modules/' //   资源所在路径
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['treetable', 'table', 'layer'], function () {
            var treetable = layui.treetable;
            var layer = layui.layer;
            var table = layui.table;
            var $ = layui.jquery;
    
            var re;
    
            // 渲染表格
            var renderTable = function () {
                layer.load(3);
                re = treetable.render({
                    elem: '#Lay_category_treeTable',
                    url: '${basepath}/goodscategory/selectTreeTable',
                    treeColIndex: 1,          // 树形图标显示在第几列
                    treeSpid: 0,             // 最上级的父级id
                    treeIdName: 'classId',       // 	id字段的名称
                    treePidName: 'parentId',    // 	pid字段的名称
                    treeDefaultClose: true,     //是否默认折叠
                    page: false,
                    //treeLinkage: true,      //父级展开时是否自动展开所有子级
                    cols: [[
                        {type: 'numbers'},
                        {title: "分类名称", field: "className",align:"left"},
                        {title: "分类编码", field: "classCode"},
                        //  {title: "分类层级", field: "classIdLevel"},
                        {title: "分类状态", field: "classIdStatus",templet: '#classIdStatusTpl'},
                        {title: "创建人", field: "createUser"},
                        {
                            title: "创建时间",
                            field: "createTime",
                            templet: '<div>{{# if(d.createTime!=null){ }} {{ layui.util.toDateString(d.createTime,\'yyyy-MM-dd HH:mm:ss\')  }} {{# } }}</div>'
                        },
                        {title: "更新人员", field: "updateUser"},
                        {
                            title: "更新时间",
                            field: "updateTime",
                            templet: '<div>{{# if(d.updateTime!=null){ }} {{ layui.util.toDateString(d.updateTime,\'yyyy-MM-dd HH:mm:ss\')  }} {{# } }}</div>'
                        },
                        {title: "操作", templet: "#updateAndDelete"}
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
    
                })
            };
    
            renderTable();
            //展开所有
            $('#btn-expand').click(function () {
                //alert(0)
                treetable.expandAll('#Lay_category_treeTable');
            });
            //折叠所有
            $('#btn-fold').click(function () {
               // alert(1)
                treetable.foldAll('#Lay_category_treeTable');
            });
            //刷新表格
            $('#btn-refresh').click(function () {
                renderTable();
            });
    
            $('#btn-search').click(function () {
                var keyword = $('#Lay_toSearch_input').val();
                //alert(keyword);
               // var searchName = $('#Lay_toSearch_input').val();
                var searchCount = 0;
                $('#Lay_category_treeTable').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                    $(this).css('background-color', 'transparent');
                    var text = $(this).text();
                    if (keyword != '' && text.indexOf(keyword) >= 0) {
                        $(this).css('background-color', 'rgba(250,230,160,0.5)');
                        if (searchCount == 0) {
                            treetable.expandAll('#Lay_category_treeTable');
                            $('html,body').stop(true);
                            $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                        }
                        searchCount++;
                    }
                });
                if (keyword == '') {
                    layer.msg("请输入搜索内容", {icon: 5});
                } else if (searchCount == 0) {
                    layer.msg("没有匹配结果", {icon: 5});
                }
            });
        });
    
    
        //这是一棵树,
        layui.use(['table', 'tree', "layer", 'jquery', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var tree = layui.tree;
            var $ = layui.jquery;
    
            $.ajax({
                url: "${pageContext.request.contextPath}/goodscategory/selectTree",
                success: function (data) {
                    //console.log(data);
                    //渲染
                    var inst1 = tree.render({
                        elem: '#Lay_category_tree',  //绑定元素
                        data: data.data,
                        showCheckbox: true
                        // accordion:true
                    });
                }
            });
        });
    
    
        //搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            var searchName = $('#Lay_toSearch_input').val();
            //发送请求,并且接收数据
            layui.use('table', function () {
                var table = layui.table;
                table.reload('Lay_back_table', {
                    where: {"platform": searchName}
                });
            });
        }
    
        //执行编辑修改
        function toOpenUpdateLayer(classId) {
            //alert(classId);
            //1.获取当前行数据===》发送ajax请求,获取当前行数据
            $.ajax({
                url: "${pageContext.request.contextPath}/goodscategory/selectOne",
                data: "aid=" + classId,
                success: function (data) {
                    $("#className").val(data.className);
                    $("#classId").val(data.classId);
                    $("#classCode").val(data.classCode);
                    // $("#classIdStatus").val(data.classIdStatus);
                    $("#classIdStatus").selected(data.classIdStatus);
    
                }
            });
    
            //2.把数据填充到修改弹出层中==>弹出层显示
            layui.use(['layer', 'form', 'table'], function () {
                var form = layui.form;
                var layer = layui.layer;
                var table = layui.table;
                var $ = layui.jquery;
    
                $("#Lay_select_Level").hide();
                layer.open({
                    title: "修改配置",
                    content: $("#layuiconfig-form-role"),
                    type: 1,
                    maxmin: true,
                    area: ['500px', '480px'],
                    end:function(){
                        window.location.reload();
                    }
                });
    
                $("#LAY-sysconfig-submit").hide();
                $("#updateSubmitBtn").show();
    
                //3.提交表单
                form.on("submit(updateSubmitBtn)", function (data) {
                    // console.log(data);
                    $.ajax({
                        url: "${pageContext.request.contextPath}/goodscategory/updateGoods",
                        data: data.field,
                        type: "post",
                        //4.接收后台修改响应回来的数据;关闭弹出层、提示修改信息、刷新table
                        success: function (data) {
                            //1.关闭掉添加弹出层
                            layer.closeAll('page');
                            //2.提示修改成功
                            layer.alert("修改" + data.msg+",请点击右上角刷新表格后生效!", {time: 3000});
                            //刷新table
                          //  table.reload("Lay_category_treeTable");
                        }
                    });
                    return false;//阻止跳转;
                })
            });
    
        }
    
        //执行添加
        function toOpenAddLayer() {
            layui.use(["form", "layer", "table"], function () {
                var form = layui.form;
                var layer = layui.layer;
                var table = layui.table;
    
                layer.open({
                    title: "添加配置",
                    content: $("#layuiconfig-form-role"),
                    type: 1,
                    maxmin: true,
                    area: ['500px', '480px'],
                    end: function () {
                        window.location.reload();
                    }
                });
    
                $("#updateSubmitBtn").hide();
                $("#LAY-sysconfig-submit").show();
    
                form.on('select(classIdLevel)', function (data) {
                    //console.log(data.elem); //得到select原始DOM对象
                    console.log("data.value = "+data.value); //得到被选中的值
                    //console.log(data.othis); //得到美化后的DOM对象
                    if(data.value == 1){
                        // alert(1);
                        $("#Lay_One_Level").hide();
                        $("#Lay_Two_Level").hide();
                    }
                    if (data.value == 2) {
                        // alert(2);
                        $("#Lay_One_Level").show();
                        $("#Lay_Two_Level").hide();
                        $.ajax({
                            url: '${basepath}goodscategory/selectOneLevel',
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                $.each(data, function (index, item) {
                                    //console.log("000 " + index);
                                    //console.log("111 " + item);
                                    $('#parentId').append(new Option(item.className, item.classId));//往下拉菜单里添加元素
                                });
                                form.render();//菜单渲染 把内容加载进去
                            }
                        })
                    }
                    if (data.value == 3) {
                        // alert(3);
                        $("#Lay_One_Level").hide();
                       // form.on('select(parent_classIdLevel_One)', function (data2){
                            $("#Lay_Two_Level").show();
                            $.ajax({
                                url: '${basepath}goodscategory/selectTwoLevel',
                                dataType: 'json',
                                type: 'post',
                                success: function (data) {
                                    $.each(data, function (index, item) {
                                        //console.log("000 " + index);
                                        //console.log("111 " + item);
                                        $('#Two_parentId').append(new Option(item.className, item.classId));//往下拉菜单里添加元素
                                    });
                                    form.render();//菜单渲染 把内容加载进去
                                }
                            })
                       // })
                    }
                });
    
                //当点击提交按钮的时候,会进入到这个函数
                form.on("submit(LAY-sysconfig-submit)", function (data) {
                     console.log(data.field);
                    $.ajax({
                        url: "${pageContext.request.contextPath}/goodscategory/addGoodsCategory",
                        data: data.field,
                        type: "post",
                        success: function (data) {
                            //1.关闭掉添加弹出层
                            layer.closeAll('page');
                            //2.提示添加成功
                            layer.alert("添加" + data.msg, {time: 3000});
                            //3.刷新table
                            table.reload("Lay_back_table");
    
                        }
                    });
                    return false;//阻止跳转;
                })
            })
        }
    
        function doDelete(classId) {
           // alert(classId);
            //确认;如果点击确认删除;否则不删除
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                var layer = layui.layer;
    
                layer.confirm('确定要删除吗?', {icon: 3, title: '确认删除'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/goodscategory/deletecl",
                        data: "aid=" + classId,
                        success: function (data) {
                            layer.alert("删除" + data.msg, {time: 2000});
                            // table.reload("Lay_back_table");
                            layer.close(index);
                        }
                    })
                });
            });
        }
    
        function doMultiDelete() {
            //获取到选中的内容的id===》table模块中找方法
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                var layer = layui.layer;
                //获取到选中的数据
                var checkStatus = table.checkStatus('Lay_back_table'); //idTest 即为基础参数 id 对应的值
                // console.log(checkStatus.data);//获取选中行的数据
                var data = checkStatus.data;
    
                if (data.length == 0) {
                    layer.alert("请选中要删除的数据");
                } else {
                    layer.confirm("确定要删除选中的所有数据", function (index) {
                        //把所有选中的数据的id封装到一个数组中
                        var ids = new Array(data.length);
                        for (var i = 0; i < ids.length; i++) {
                            ids[i] = data[i].id;
                        }
                        console.log("ids===" + ids);
                        //执行删除操作
                        $.ajax({
                            url: "${pageContext.request.contextPath}/prefixThird/deleteMany",
                            data: "ids=" + ids,
                            success: function (data) {
                                //删除确认框关闭掉
                                layer.close(index);
                                //删除提示
                                layer.alert("删除" + data.msg+",请点击右上角刷新表格后生效!", {time: 2000});
                                //刷新table
                                // table.reload("Lay_back_table");
                                // renderTable();
                            }
                        })
                    });
                }
            });
        }
    
    
    </script>
    
    </body>
    </html>
    
    
    展开全文
  • 今天有网友反映,他昨天做的Excel表格开了,但其他Excel表格是可以打开的,非常郁闷,那么Excel表格开是什么原因呢,Excel表格开怎么办呢,下面脚本之家小编就来说说有关造成Excel表格开的几原因...

    今天有网友反映,他昨天做的Excel表格打不开了,但其他Excel表格是可以打开的,非常郁闷,那么Excel表格打不开是什么原因呢,Excel表格打不开怎么办呢,下面脚本之家小编就来说说有关造成Excel表格打不开的几种原因及解决办法。

    29e654ba49f90855b7b85af2fd09986c.png

    一、Excel表格打不开是什么原因

    1、电脑中毒

    如果电脑中毒有可能导致Excel表格文件打不开,当然如果中毒有可能不仅仅是Excel表格文件打不开,有可以其他文件也会打不开,而且病毒的类型不同造成的影响也有所不同,例如:如果是宏病毒,那么文件中应用了宏那么就有可能打不开了,如果没有应用宏就有可能不会有影响,不管自怎样,先保证电脑是无毒环境才可以继续检查。

    70e49950fed207c1f37b03493c5d54f6.png

    2、该文件损坏

    如果我们不正常关机,或有时其他人不正常打开,例如:某位大虾用记事本或其他应用程序打开过某个Excel表格文件,不辛的事还保存了,那么就一定会导致Excel表格打不开,这时我只能说请节哀顺变吧,基本没办法找回来了,所以任何文件请用正常对应的程序去打开,否则你一定会欲哭无泪。

    3、磁盘空间不够

    c9b09082fa53b5eac4fb6972f318ebba.png

    如果我们的电脑磁盘空间不够,也是Excel表格打不开的原因之一,因为一般打开任何文档都需要创建临时文件的,我们在打开Excel表格的时候因没有了空间从而无法打开Excel表格文件,通常会出现提示“该文件可能是只读的,或者你要访问的位置是只读的,或者文件所在的服务器没有响应”,这时解决的办法就是清除无用的程序,把磁盘空间释放出来,别告诉我不会,那就先清除回收站吧,然后清除些临时文件,真不会用360吧,里面有的。

    4、版本不兼容

    还有一种导致Excel表格打不开的原因,有可能是你的Excel版本太低,这种情况一般是对方把Excel表格文件发给你,而你电脑安装的Excel版本过低,对方版本太高造成,这样同样会造成Excel表格打不开,要解决这种问题一种是你安装最新版本的Excel,还有一种方法就是网上在线版本转换,当然你让对方另存为低版本的Excel表格文件同样可以解决。

    5、Excel表格无关链

    如果我们的关链文件损坏或关链错了,这时我们双击Excel表格文件同样是打不开的,当然如果那个淘气的家伙把你的Excel软件卸载掉了,呵呵,你的Excel表格文件怎么可能打得开呢,找到Excel表格打不开是什么原因了,我想解决的办法不用我说了吧,赶快安装及重新关链吧。

    二、Excel表格打不开怎么办

    上面说了一下Excel表格打不开是什么原因的几种,下面就来讲讲如何解决吧

    1、杀毒,不多讲

    2、用高版本打开无法打开的Excel表格文件,如果不行可以偿试用WPS的高版本来找开试试。

    3、采用导入方式导入损坏的Excel表格文件,先打开Excel,然后选择“数据”菜单中的“导入外部数据”进行导入这个损坏的Excel表格文件进行导入,能恢复多少算多少吧。

    好了,以上就是有关Excel表格打不开是什么原因以及Excel表格打不开怎么办的内容,希望对你有所帮助。

    展开全文
  • PyQt5的表格创建

    万次阅读 2018-04-16 12:32:31
    PyQt5中有两种创建表格的控件:Table View和Table Widget。 1、Table Widget QTableWidget是QT程序中常用的显示数据表格的空间,很类似于VC、C#中的DataGrid。 pyqt5的tablewidget组件比较特殊,每个方格可以...
  • layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要编辑表格内容,动态增加数据行。编辑功能组件已支持。但动态增加数据行好像没有支持,网上提供的方式是,获得组件的数据集再加入一个空记录或...
  • 利用Markdown创建表格

    万次阅读 多人点赞 2017-02-15 20:52:17
    Markdown作为一轻量级书写/写作语言,并没有提供很好的排版、编辑等功能。因此,如果想要利用Markdown创建表格(特别是复杂...总结而言,有如下两最为直观的创建表格方式: 简单方式 Name | Academy | score - |
  • wps手机表格显示全怎么办

    千次阅读 2021-06-25 00:36:42
    1. wps中word表格显示全怎么办Word跨页表格在WPS中会显示全。解决此问题要分两情况。情况 一:行列分布规则的表格用WPS打开一个带有行列分布规则跨页表格的DOC文档。1. 将光标放在表格上,点击鼠标右键,在弹...
  • 利用Dreamweaver处理网页表格方法

    千次阅读 2021-06-17 06:29:22
    创建表格(1)创建新表格利用Dreamweaver4.0创建新表格时,首先选中对象面板上“View”栏目下“StandardView”(标准视图)按钮,然后可以通过下列四种方式中的任意一:①将对象面板调整到“Common”类上,单击...
  • print()打印中英文混合的DataFrame表格会出现输出无法对齐的情况,十分美观,也影响直观的分析。下面介绍两解决方案,总有一款适合你:
  • 目前许多在线转换工具,如TablesGenerator和TableConvert,目前TablesGenerator不能访问,貌似已经挂了,这里以TableConvert作为说明。 TableConvert 是一个可以在线转换表格的工具,支持 Markdown 表格、CSV、JSON...
  • win10 excel文件打不开,提示“ 此应用无法在你的电脑上运行 ”打开方式选择32位里面的这个就可以了,搞了半天才解决的我的电脑不能新建excel电法新建excel文档的解决方法及步骤:键按win R快捷键。2. 输入regedit...
  • 目录创建表格设置表格竖线设置表格横线指定表列宽度 创建表格 \begin{tabular} \end{tabular} \begin{tabular}{l c c c r} % 左对齐,居中对齐,居中对齐,居中对齐,右对齐 姓名 & 语文 & 数学 & ...
  • [总结]----Hive创建表格的几种方式

    千次阅读 2017-09-26 20:21:13
    ##方式一 create + load create [external] table table_name( col1_name col1_type, ... coln_name coln_type ) row format delimited fields terminated by '\t'; //load加载数据 load data [local]...
  • 创建对象的5种方式

    千次阅读 2021-03-20 20:44:40
    创建对象的5种方式 1、new关键字 这是我们最常见的创建对象的方式,通过这种方式我们还可以调用任意的构造器(无参的和有参的)。 public class Main { public static void main(String[] args) { Person person1 ...
  • HTML表格

    千次阅读 2021-06-17 10:21:15
    表格由一行或多行单元格组成,应用表格可以让数据展现更有条理,表格标签有:table标签(表格)、tr标签(行)、td标签(单元格)组成。例如,要展现一组企业员工通讯录,通讯录包括员工名称、电话、电子邮件、职务四项,...
  • 腾讯文档上创建表格,多人进行编辑,表格的行数不够用了,要怎么增加呢?添加的方法有多种,下面我们就来看看详细的教程。软件名称:腾讯文档pc版 v2.2.9.0 免费安装版软件大小:119MB更新时间:2021-06-29立即下载...
  • 一、第一步: 第二步: 第三步: 第四: 第五: 这是后问题解决方式就出来了! 原来是两个表格不一致,就这样将从新建立一个表格,或者直接改尾缀名!
  • 表格和列表基础标签

    2020-12-17 19:21:49
    一、表格 表格作用: 存在即是合理的。 表格的现在还是较为常用的一标签,但...1. 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签。 创建表格的基本语法: <table> <tr> <td>单
  • 电脑做表格的基本操作教程

    千次阅读 2021-07-09 04:43:47
    创建表格,插入与删除一行一列或多行多行,一次移动一行一列或多行多列,拆分与合并单元格,单元格内换行,表格求和与求平均值是Excel表格的基本操作;除此之外,Excel表格的基本操作还包括调整行高列宽、单元格样式...
  • javascript动态创建表格

    千次阅读 2016-08-25 10:55:35
    利用js来动态创建表格有两格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一有可能在IE上有问题,所以推荐大家使用第二了,直接说吧。 1、inserRow()和insertCell()函数 ...
  • flask - 创建表格及表格的增删查

    千次阅读 2018-05-19 10:00:50
    创建表格模型 提交表格模型到数据库 实现表格的增删查功能 flask - 创建表格模型 学生表与班级表是一对多关系 学生表与课程表是多对多关系 # 创建学生表模型 from datetime import datetime from flask...
  • 创建DataFrame的三种方式

    千次阅读 2018-08-17 22:26:17
    Spark创建DataFrame的三方法 跟关系数据库的表(Table)一样,DataFrame是Spark中对带模式(schema)行列数据的抽象。DateFrame广泛应用于使用SQL处理大数据的各种场景。创建DataFrame有很多方法,比如从本地List...
  • 如何利用表格制作网页

    千次阅读 2021-06-23 00:33:15
    HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及...
  • Android表格控件动态生成表格

    万次阅读 2018-10-09 15:26:38
    但本文介绍另外一思路,用动态布局的方式实现,这种方式更灵活,内容、样式高度扩展,熟练的人可随意运用到任何视图复用的场景。使用滚动条避免显示完全问题。 效果图: 核心代码如下: public class ...
  • 自 vika 维格表提出 「多维智能表格」 的理念后,在国内也掀起了一阵「数据协作」办公软件的风潮,市面上种类繁多、功能各异的多维智能表格也开始层出不穷。 相较于国外产品 Airtable、Clickup 等全英文的界面和交互...
  • 在 LaTeX 中插入表格

    万次阅读 多人点赞 2020-10-24 11:42:58
    本文介绍了如何在LaTeX文档中插入表格,并且详细介绍了如何自定义表格中的各个模块,例如宽度、颜色等。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 240,188
精华内容 96,075
关键字:

哪种方式不能建立表格