精华内容
下载资源
问答
  • HTML5 使用JQuery对表格进行增加列操作 1.设计数据表格页面; 2增加一列“平均成绩”,显示每个学生的三门课的平均成绩,保留一位小数点; 3.把身为党员,且平均成绩>87分的女同学数据行使用红色背景标注 style...

    HTML5 使用JQuery对表格进行操作

    1.设计数据表格页面;
    2增加一列“平均成绩”,显示每个学生的三门课的平均成绩,保留一位小数点;
    3.把身为党员,且平均成绩>87分的女同学数据行使用红色背景标注。

    style样式代码:
    <style>
    			table {
    				text-align: center;/*文本居中,即表格中的文字内容居中*/
    				margin: auto;/*将整个表格居中*/
    				border-collapse: collapse;/*合并边框线用*/
    				/*cellspacing为单元格之间的距离,当值为0时,使距离为0单不会合并边框线*/
    				height: 300px;
    				width: 600px;
    			}
    		</style>
    
    主体部分代码:
    <body>
    		<table border="1"><!--有边框,无边框时赋值为0-->
    			<tr style="background-color: lightgrey;">
    				<th>学号</th>
    				<th>姓名</th>
    				<th>性别</th>
    				<th>党员</th>
    				<th>高等数学</th>
    				<th>大学英语</th>
    				<th>计算机文化基础</th>
    			</tr>
    
    			<tr>
    				<td>13310320712</td>
    				<td>陈中华</td>
    				<td></td>
    				<td><input type="checkbox" checked></td>
    				<td>87</td>
    				<td>83</td>
    				<td>94</td>
    			</tr>
    			<tr>
    				<td>13310320713</td>
    				<td>王楠</td>
    				<td></td>
    				<td><input type="checkbox" checked></td>
    				<td>84</td>
    				<td>85</td>
    				<td>93</td>
    			</tr>
    			<tr>
    				<td>13310320714</td>
    				<td>杨佳敏</td>
    				<td></td>
    				<td><input type="checkbox"></td>
    				<td>88</td>
    				<td>89</td>
    				<td>96</td>
    			</tr>
    			<tr>
    				<td>13310320715</td>
    				<td>李茂杨</td>
    				<td></td>
    				<td><input type="checkbox" checked></td>
    				<td>82</td>
    				<td>84</td>
    				<td>93</td>
    			</tr>
    			<tr>
    				<td>13310320716</td>
    				<td>赵家伟</td>
    				<td></td>
    				<td><input type="checkbox"></td>
    				<td>79</td>
    				<td>82</td>
    				<td>90</td>
    			</tr>
    			<tr>
    				<td>13310320717</td>
    				<td>张思琪</td>
    				<td></td>
    				<td><input type="checkbox" checked></td>
    				<td>94</td>
    				<td>82</td>
    				<td>90</td>
    			</tr>
    		</table>
    		
    		
    		<script src="js/jquery-2.1.0.js"></script>
    		<script>
    			$(function() {
    				var $tr0 = $("tr:first");//筛选表格第一行
    				$tr0.append($('<th>平均成绩</th>'));//添加平均成绩列
    				
    				var $tr1 = $("tr:gt(0)");//筛选第一行之后的行
    				$tr1.append('<td></td>');
    				
    				//遍历第一行之后的行
    				$('tr:gt(0)').each(function(key) {
    					var Avg_Grade = (Number($(this).find('td:eq(4)').text()) + 
    					Number($(this).find('td:eq(5)').text()) + 
    					Number($(this).find('td:eq(6)').text()))/3;//Number转换JQuery对象为number类型
    					
    					//在遍历的情况下遍历列,实现对指定数据的处理
    					//正确使用this find
    					//toFlexed(n)保留n位小数
    					$(this).find('td:eq(7)').text(Avg_Grade.toFixed(1));	
    					//判断条件			
    					if(Avg_Grade.toFixed(1)>87&&$(this).find('td:eq(2)').text()=='女'){
    						if($(this).find('td:eq(3) input').prop("checked") == true)//复选框是否选中判断
    						$(this).attr("style","background-color:indianred ");//对指定行改变属性的值
    					}
    				});
    			});
    		</script>
    	</body>
    
    代码效果:在这里插入图片描述
    展开全文
  • vue+element 表格,前端添加筛选条件 tables () { const search = this.dataForm.plateNo if (search) { return this.carData.filter(dataNews => { return Object.keys(dataNews).some(key => { // ...

    vue+element 表格,前端添加筛选条件

    在这里插入图片描述

        computed: {
          tables () {
            const search = this.dataForm.plateNo
            if (search) {
              return this.carData.filter(dataNews => {
                return Object.keys(dataNews).some(key => {
                  // return String(dataNews[key]).toLowerCase().indexOf(search) > -1
                  return String(dataNews[key]).indexOf(search) > -1
                })
              })
            }
            return this.carData
          }
        },
    
          format (val) {
            if (val.indexOf(this.dataForm.plateNo) !== -1 && this.dataForm.plateNo !== '') {
              return val.replace(this.dataForm.plateNo, '<span style="color:red" >' + this.dataForm.plateNo + '</span>')
            } else {
              return val
            }
          },
    
    展开全文
  • MINIUI 表格内修改及各控件使用

    万次阅读 2018-04-25 10:55:19
    表格界面整体展示1、功能介绍:1、 实现后台的数据库显示到前端datagrid表格界面2、 实现数据表格的分页操作3、 实现上端datagrid表格与下端editForm表格的数据绑定4、实现视图的数据新增、删除、保存功能5、实现...

    表格界面整体展示

    1、功能介绍:

    1、 实现后台的数据库显示到前端datagrid表格界面

    2、 实现数据表格的分页操作

    3、 实现上端datagrid表格与下端editForm表格的数据绑定

    4、实现视图内的数据新增、删除、保存功能

    5、实现视图数据的斑马纹显示

    6、通过点击最上端的两个勾选框,对数据表修改表格横竖线

    7、选中一条数据,点击“上移”“下移”按钮实现数据位置的移动

    8、选中一列进行数据列的锁定和取消锁定

    9、在视图中对单行数据进行修改,头行编号属性锁定为不可修改,剩余属性为可修改,修改后属性添加标记

    10、“国家”一列属性为下拉选择框

    具体代码见具体代码:

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org"
    	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta charset="UTF-8" />
    <title>公共页面</title>
    
    <script th:src="@{/miniuinew/boot.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/test.js}" type="text/javascript"></script>
    <style type="text/css">
    a {
    	text-decoration: none;
    }
    </style>
    <style type="text/css">
    html, body {
    	width: 100%;
    	height: 100%;
    	border: 0;
    	margin: 0;
    	padding: 0;
    	overflow: visible;
    }
    
    .mini-fit {
    	width: auto;
    	overflow: auto;
    	position: relative;
    	margin-left: 10px;
    	margin-right: 14px;
    }
    </style>
    
    </head>
    <body>
    	<h1>研究datagrid表格修改及各控件使用</h1>
    	<div style="margin-bottom: 8px;">
    		<input type="checkbox" id="hline"
    			οnclick="setShowGridHLine(this.checked)" /><label for="hline">横向表格线</label>
    		<input type="checkbox" id="vline" checked
    			οnclick="setShowGridVLine(this.checked)" style="margin-left: 25px;" /><label
    			for="vline">竖向表格线</label>
    	</div>
    	<div style="padding-bottom:5px;">
                        
            <input type="button" value="上移" οnclick='moveUp()'/>
            <input type="button" value="下移" οnclick='moveDown()'/>
            
            <input type="button" value="取消锁定" οnclick="unfixColumns()"/>
            <input type="button" value="锁定列" οnclick="fixColumns()"/>
          
        </div>
    	<div style="width: 100%;">
    		<div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
    			<table style="width: 100%;">
    				<tr>
    					<td style="width: 100%;"><a class="mini-button"
    						iconCls="icon-add" οnclick="addRow()" plain="true">增加</a> <a
    						class="mini-button" iconCls="icon-remove" οnclick="removeRow()"
    						plain="true">删除</a> <span class="separator"></span> <a
    						class="mini-button" iconCls="icon-save" οnclick="saveData()"
    						plain="true">保存</a></td>
    
    				</tr>
    			</table>
    		</div>
    	</div>
    	<div id="editgrid" class="mini-datagrid"
    		style="width: 100%; height: 60%;" allowResize="true" url="/getAll"
    		idField="id" allowCellEdit="true" allowCellSelect="true"
    		editNextOnEnterKey="true" editNextRowCell="true" navEditMode="true"
    		sizeList="[10,10,10,10]" pageSize="10" allowCellValid="true"
    		oncellvalidation="onCellValidation" showColumnsMenu="true"
    		allowAlternating="true">
    		<div property="columns">
    			<div name='indexcolumn' type='indexcolumn' width='25'></div>
    			<div name='checkcolumn' type='checkcolumn' width='20'></div>
    			<div field="code" width="120" headerAlign="center" allowSort="true"
    				hideable="true">
    				代码编号 <input property="editor" class="text" minValue="1001"
    					maxValue="9999" value="1001" style="width: 100%;" />
    			</div>
    			<div field="name" width="120" headerAlign="center" allowSort="true">
    				站点名 <input id="name" property="editor" class="mini-textbox"
    					style="width: 100%;" minWidth="100%" />
    			</div>
    
    			<div field="effect_flag" width="120" headerAlign="center"
    				allowSort="true">
    				效率标识 <input property="editor" class="mini-textbox"
    					style="width: 100%" minWidth="100%" />
    			</div>
    
    			<div field="create_time" width="100" headerAlign="center"
    				dateFormat="yyyy-MM-dd" allowSort="true">
    				创建日期 <input property="editor" class="mini-datepicker"
    					style="width: 100%" minWidth="100%" />
    			</div>
    			<!--ComboBox:远程数据-->
    			<div type="comboboxcolumn" field="country" width="100"
    				headerAlign="center">
    				国家 <input property="editor" class="mini-combobox"
    					style="width: 100%;" url="../data/countrys.txt" />
    			</div>
    			<div type="checkboxcolumn" field="finished" trueValue="1"
    				falseValue="0" width="60" headerAlign="center">是否完成</div>
    		</div>
    	</div>
    	<fieldset
    		style="width: 100%; border: solid 1px #aaa; margin-top: 8px; position: relative;">
    		<legend>项目详细信息</legend>
    		<div id="editForm1" style="padding: 5px;">
    			<input class="mini-hidden" name="id" />
    			<table style="width: 100%;">
    				<tr>
    					<td style="width: 80px;">站点编号:</td>
    					<td style="width: 150px;"><input id="code" name="code"
    						class="mini-textbox" /></td>
    					<td style="width: 80px;">站点名称:</td>
    					<td style="width: 150px;"><input id="name" name="name"
    						class="mini-textbox" /></td>
    					<td style="width: 80px;">效率标识:</td>
    					<td style="width: 150px;"><input name="effect_flag"
    						class="mini-textbox" /></td>
    				</tr>
    				<tr>
    					<td>创建日期:</td>
    					<td><input id="create_time" name="create_time"
    						class="mini-combobox" /></td>
    					<td>国家:</td>
    					<td><input id="country" name="country" class="mini-combobox" /></td>
    				</tr>
    			</table>
    		</div>
    	</fieldset>
    </body>
    </html>
    $(function() {
    	mini.parse();
    	var grid = mini.get("editgrid");
    	grid.load();
    	grid.sortBy("code", "desc");
    	// 绑定表单
    	var db = new mini.DataBinding();
    	db.bindForm("editForm1", grid);
    })
    
    // 添加一行数据
    function addRow() {
    	var grid = mini.get("editgrid");
    	var newRow = {
    		code : "New Project"
    	};
    	grid.addRow(newRow, 0);
    	grid.validateRow(newRow); // 加入新行马上验证
    }
    
    // 克隆一条数据
    function cloneRow() {
    	var grid = mini.get("editgrid");
    	var row = grid.getSelected();
    	if (row) {
    		var newRow = mini.clone(row);
    		delete newRow.id;
    
    		SaveRow(newRow);
    	} else {
    		alert("请选选择一条记录");
    	}
    }
    // 数据行的上移下移
    function moveUp() {
    	var grid = mini.get("editgrid");
    	var row = grid.getSelected();
    	if (row) {
    		var index = grid.indexOf(row);
    		grid.moveRow(row, index - 1);
    	} else {
    		alert("请选选择一条记录");
    	}
    }
    function moveDown() {
    	var grid = mini.get("editgrid");
    	var row = grid.getSelected();
    	if (row) {
    		var index = grid.indexOf(row);
    
    		grid.moveRow(row, index + 2);
    	} else {
    		alert("请选择一套记录");
    	}
    }
    // 锁定列和取消锁定
    function unfixColumns() {
    	var grid = mini.get("editgrid");
    	grid.unFrozenColumns();
    }
    function fixColumns() {
    	var grid = mini.get("editgrid");
    	grid.frozenColumns(0, 1);
    }
    
    // 删除一行数据
    function removeRow() {
    	var grid = mini.get("editgrid");
    	var rows = grid.getSelecteds();
    	if (rows.length > 0) {
    		grid.removeRows(rows, true);
    	}
    }
    // 数据保存
    function saveData() {
    	grid.validate();
    	if (grid.isValid() == false) {
    		// alert("请校验输入单元格内容");
    		var error = grid.getCellErrors()[0];
    		grid.beginEditCell(error.record, error.column);
    		return;
    	}
    	var data = grid.getChanges();
    	var json = mini.encode(data);
    	grid.loading("保存中,请稍后。。。");
    	$.ajax({
    		url : "/savedata",
    		type : "post",
    		contentType : "application/json;charset=utf-8",
    		data : json,
    		dataType : "json",
    		success : function(text) {
    			grid.setData(text);
    		}
    	});
    }
    // 当输入域发生改变时改变颜色
    $(document).ready(function() {
    	$(".mini-textbox").change(function() {
    		$(this).css("background-color", "#FFFFCC");
    	});
    });
    // 添加横竖线效果
    function setShowGridHLine(checked) {
    	var grid = mini.get("editgrid");
    	grid.setShowHGridLines(checked);
    }
    function setShowGridVLine(checked) {
    	var grid = mini.get("editgrid");
    	grid.setShowVGridLines(checked);
    }
    
    function onCellValidation(e) {
    	// 对输入框的值进行筛选
    	if (e.field == "effect_flag") {
    
    		if (e.value != 'Y') {
    			e.isValid = false;
    			e.errorText = "不能设置为其他";
    		}
    	}
    	if (e.field == "name") {
    		if (e.value == 0) {
    			e.isValid = false;
    			e.errorText = "不能为空";
    		}
    	}
    	if (e.field == "country") {
    		if (e.value == 0) {
    			e.isValid = false;
    			e.errorText = "可以忽略项";
    		}
    	}
    	if (e.field == "create_time") {
    		if (e.value == 0) {
    			e.isValid = false;
    			e.errorText = "不能为空";
    		}
    	}
    
    }
    



    展开全文
  • item) { NEWJSON.push(item.name) bzcodejson.push(item.code) }) elem.val(NEWJSON.join(",")) //给下拉框增加一个属性unitcodes,以字符串的形式存储数据 $("#unit").attr("unit",bzcodejson.join(",")) } }) } 4...

    效果图:

    在这里插入图片描述

    步骤:

    1,引入插件tableSelect

    
    layui.config({
            base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
            version: 'v1.5.10' // 插件版本号
        }).extend({
            soulTable: 'soulTable/soulTable',
            tableChild: 'soulTable/tableChild',
            tableMerge: 'soulTable/tableMerge',
            tableFilter: 'soulTable/tableFilter',
            excel: 'soulTable/excel',
            treeGrid:'treegrid/treeGrid',
            tableSelect:'tableSelect/tableSelect',  // 插件
            excel:'excel/excel'
        });
    
    // 使用插件
     layui.use(['form','table','soulTable','laypage','layer','tree', 'util','tableSelect','excel'], function() {
            hsgriad()
        })
        
    

    2,页面样式

    
     <label style="padding:0px 10px 0px 5px;">核算单元</label>
     <div class="layui-inline">
         <input type="text" style="height: 26px;width: 120px;" placeholder="请选择" autocomplete="off" class="layui-input" name="unit" id="unit" >
     </div>
     
    

    3,设置路径,前端请求数据

    核算单元数据下拉框请求路径,获取数值

    
        function hsgriad() {
            var tableSelect = layui.tableSelect;
            tableSelect.render({
                elem: '#unit',
                size: 'sm',//定义输入框input对象 必填
                checkedKey: 'code', //表格的唯一建值,非常重要,影响到选中状态 必填
                searchKey: 'keyword',	//搜索输入框的name值 默认keyword
                searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
                page:false,
                table: {	//定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
                    page:false,
                    url:'/**/getList',
                    cols: [[
                        {type: 'checkbox' },
                        {field:'code',title:'编码',width:150,sortable:true},
                        {field:'name',title:'名称',width:250,sortable:true},
                    ]]
                },
                done: function (elem, data) {
                    var NEWJSON = []
                    var bzcodejson=[]
                    layui.each(data.data, function (index, item) {
                        NEWJSON.push(item.name)
                        bzcodejson.push(item.code)
                    })
                    elem.val(NEWJSON.join(","))
                    //给下拉框增加一个属性unitcodes,以字符串的形式存储数据
                    $("#unit").attr("units",bzcodejson.join(","))
                }
            })
        }
    
    
    

    4,后端处理数据表格下拉框的数据,响应请求

    
        @RequestMapping(value = "/getList")
        @ResponseBody
        public HashMap<String, Object> getList(@RequestParam HashMap<String, String> paraMap) {
            try {
                LinkedHashMap<String, String> orderby = new LinkedHashMap<>();
                orderby.put("bzcode","asc");
                List<Tbz4Entity> resultlist = new LinkedList<>();
                List<HashMap<String, Object>> list = new LinkedList<>();
                resultlist = commonApiDao.getScrollData(Tbz4Entity.class, " 1=1 ", new Object[]{},orderby).getResultlist();
                for (int i = 0; i < resultlist.size(); i++) {
                    HashMap<String, Object> map = new HashMap<>();
                    map.put("code", resultlist.get(i).getBzcode());
                    map.put("namereal", resultlist.get(i).getBzname());
                    map.put("name", resultlist.get(i).getBzname() + "" + ToFirstChar(resultlist.get(i).getBzname().replace("《", "").replace("》", "")));
                    list.add(i, map);
                }
                list=
                        list.stream().filter(
                                stringObjectHashMap -> {
                                    if(paraMap.get("keyword")!=null){
                                        return stringObjectHashMap.get("name").toString().indexOf(paraMap.get("keyword"))>-1;
                                    }
                                    return true;
                                }
                        ).collect(Collectors.toList());
                HashMap<String, Object> objectHashMap = createResult(true, "成功");
                objectHashMap.put("datalist", list);
                objectHashMap.put("data", list); //将值提交到前端
                objectHashMap.put("code", 0);
                return objectHashMap;
            } catch (Exception e) {
                log.error(e.getMessage(),e);
                return createResult(false, "失败");
            }
        }
        
    

    5,查询功能获取核算单元数据传入后端方式

    
     bzcodes:$("#unit").attr("units"),
    
    

    传入的数据格式

    
    {
    	"msg": "成功",
    	"code": 0,
    	"success": true,
    	"data": [{
    		"code": "1300",
    		"name": "放射科-普通放射fsk-ptfs",
    		"namereal": "放射科-普通放射"
    	},  {
    		"code": "3300",
    		"name": "放射科-磁共振室fsk-cgzs",
    		"namereal": "放射科-磁共振室"
    	}]
    }
    
    

    附件:tableSelect插件代码

    tableSelect.js 文件代码

    
    layui.define(['table', 'jquery', 'form'], function (exports) {
        // "use strict";
    
        var MOD_NAME = 'tableSelect',
            $ = layui.jquery,
            table = layui.table,
            form = layui.form;
        var tableSelect = function () {
            this.v = '1.1.0';
            this.cacheObj ={};
        };
    
        /**
        * 初始化表格选择器
        */
        tableSelect.prototype.render = function (opt) {
            var elem = $(opt.elem);
            var tableDone = opt.table.done || function(){};
    		
            //默认设置
            opt.searchKey = opt.searchKey || 'keyword';
            opt.searchPlaceholder = opt.searchPlaceholder || '关键词搜索';
            opt.checkedKey = opt.checkedKey;
            opt.table.page = opt.table.page==undefined?true:opt.table.page;
            opt.table.size = "sm";
            opt.table.height = opt.table.height || 315;
    
            var functionVar=function(e) {
                e.stopPropagation();
                if(document.getElementById("tableSelectSearchInput")){
                    $("#tableSelectSearchInput").val(elem.val())
                    var e = document.createEvent("Event");
                    e.initEvent("oninput", true, true);
                    document.getElementById("tableSelectSearchInput").dispatchEvent(e);
                    $("#tableSelectSearchInput").trigger("oninput");
                }
    
                if($('div.tableSelect').length >= 1){
                    return false;
                }
                var t = elem.offset().top + elem.outerHeight()+"px";
                var l = elem.offset().left +"px";
                var tableName = "tableSelect_table_" + new Date().getTime();
                var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:530px;">';
                tableBox += '<div class="tableSelectBar">';
                tableBox += '<form lay-filter="tableSelectForm" id="tableSelectForm" class="layui-form" action="" style="display:inline-block;">';
                tableBox += '<input id="tableSelectSearchInput" οninput="layui.tableSelect.searchInput(\''+tableName+'\');" style="display:inline-block;width:190px;height:26px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+opt.searchKey+'" placeholder="'+opt.searchPlaceholder+'" autocomplete="off" class="layui-input"><button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
                tableBox += '</form>';
                tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
                tableBox += '</div>';
                tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'"></table>';
                tableBox += '</div>';
                tableBox = $(tableBox);
                $('body').append(tableBox);
    
                //数据缓存
                var checkedData = [];
    
                //渲染TABLE
                opt.table.elem = "#"+tableName;
                opt.table.id = tableName;
                opt.table.done = function(res, curr, count){
                    defaultChecked(res, curr, count);
                    setChecked(res, curr, count);
                    tableDone(res, curr, count);
                };
                var tableSelect_table = table.render(opt.table);
                tableSelect.cacheObj[tableName]=tableSelect_table;
    
                //分页选中保存数组
                table.on('radio('+tableName+')', function(obj){
                    if(opt.checkedKey){
                        checkedData = table.checkStatus(tableName).data
                    }
                    updataButton(table.checkStatus(tableName).data.length)
                })
                table.on('checkbox('+tableName+')', function(obj){
                    if(opt.checkedKey){
                        if(obj.checked){
                            for (var i=0;i<table.checkStatus(tableName).data.length;i++){
                                checkedData.push(table.checkStatus(tableName).data[i])
                            }
                        }else{
                            if(obj.type=='all'){
                                for (var j=0;j<table.cache[tableName].length;j++) {
                                    for (var i=0;i<checkedData.length;i++){
                                        if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
                                            checkedData.splice(i,1)
                                        }
                                    }
                                }
                            }else{
                                //因为LAYUI问题,操作到变化全选状态时获取到的obj为空,这里用函数获取未选中的项。
                                function nu (){
                                    var noCheckedKey = '';
                                    for (var i=0;i<table.cache[tableName].length;i++){
                                        if(!table.cache[tableName][i].LAY_CHECKED){
                                            noCheckedKey = table.cache[tableName][i][opt.checkedKey];
                                        }
                                    }
                                    return noCheckedKey
                                }
                                var noCheckedKey = obj.data[opt.checkedKey] || nu();
                                for (var i=0;i<checkedData.length;i++){
                                    if(checkedData[i][opt.checkedKey] == noCheckedKey){
                                        checkedData.splice(i,1);
                                    }
                                }
                            }
                        }
                        checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                        updataButton(checkedData.length)
                    }else{
                        updataButton(table.checkStatus(tableName).data.length)
                    }
                });
    
                //渲染表格后选中
                function setChecked (res, curr, count) {
                    for(var i=0;i<res.data.length;i++){
                        for (var j=0;j<checkedData.length;j++) {
                            if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
                                res.data[i].LAY_CHECKED = true;
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
                                checkbox.prop('checked', true).next().addClass('layui-form-checked');
                                var radio  = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
                                radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
                            }
                        }
                    }
                    var checkStatus = table.checkStatus(tableName);
                    if(checkStatus.isAll){
                        $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                        $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                    updataButton(checkedData.length)
                }
    
                //写入默认选中值(puash checkedData)
                function defaultChecked (res, curr, count){
                    if(opt.checkedKey && elem.attr('ts-selected')){
                        var selected = elem.attr('ts-selected').split(",");
                        for(var i=0;i<res.data.length;i++){
                            for(var j=0;j<selected.length;j++){
                                if(res.data[i][opt.checkedKey] == selected[j]){
                                    checkedData.push(res.data[i])
                                }
                            }
                        }
                        checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                    }
                }
    
                //更新选中数量
                function updataButton (n) {
                    tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')')
                }
    
                //数组去重
                function uniqueObjArray(arr, type){
                    var newArr = [];
                    var tArr = [];
                    if(arr.length == 0){
                        return arr;
                    }else{
                        if(type){
                            for(var i=0;i<arr.length;i++){
                                if(!tArr[arr[i][type]]){
                                    newArr.push(arr[i]);
                                    tArr[arr[i][type]] = true;
                                }
                            }
                            return newArr;
                        }else{
                            for(var i=0;i<arr.length;i++){
                                if(!tArr[arr[i]]){
                                    newArr.push(arr[i]);
                                    tArr[arr[i]] = true;
                                }
                            }
                            return newArr;
                        }
                    }
                }
    
                //FIX位置
                var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
                var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
                overHeight && tableBox.css({'top':'auto','bottom':'0px'});
                overWidth && tableBox.css({'left':'auto','right':'5px'})
    
                //关键词搜索
                form.on('submit(tableSelect_btn_search)', function(data){
                    tableSelect_table.reload({
                        where: data.field
                        // page: {
                        //   curr: 1
                        // }
                    });
                    return false;
                });
    
                //双击行选中
                table.on('rowDouble('+tableName+')', function(obj){
                    var checkStatus = {data:[obj.data]};
                    selectDone(checkStatus);
                })
    
                //按钮选中
                tableBox.find('.tableSelect_btn_select').on('click', function() {
                    var checkStatus = table.checkStatus(tableName);
                    if(checkedData.length > 1){
                        checkStatus.data = checkedData;
                    }
                    selectDone(checkStatus);
                })
    
                //写值回调和关闭
                function selectDone (checkStatus){
                    if(opt.checkedKey){
                        var selected = [];
                        for(var i=0;i<checkStatus.data.length;i++){
                            selected.push(checkStatus.data[i][opt.checkedKey])
                        }
                        elem.attr("ts-selected",selected.join(","));
                    }
                    opt.done(elem, checkStatus);
                    tableBox.remove();
                    delete table.cache[tableName];
                    checkedData = [];
                }
    
                //点击其他区域关闭
                $(document).mouseup(function(e){
                    var userSet_con = $(''+opt.elem+',.tableSelect');
                    if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
                        tableBox.remove();
                        delete table.cache[tableName];
                        delete tableSelect.cacheObj[tableName];
                        checkedData = [];
                    }
                });
            }
            elem.off('click').on('click',functionVar);
            elem.off('input').on('input',functionVar);
        }
    
        /**
        * 隐藏选择器
        */
        tableSelect.prototype.hide = function (opt) {
            $('.tableSelect').remove();
        }
    
        tableSelect.prototype.searchInput = debounce(function (seltablename) {
            tableSelect.cacheObj[seltablename].reload({
                where: form.val("tableSelectForm")
                // page: {
                //     curr: 1
                // }
            });
        },100)
    
        // 第四版(立即执行,停止触发 n 秒后,才可以重新触发执行。反过来)
        function debounce(func, wait, immediate) {
            // immediate默认为false
            var timeout, args, context, timestamp, result;
    
            var later = function() {
                // 当wait指定的时间间隔期间多次调用_.debounce返回的函数,则会不断更新timestamp的值,导致last < wait && last >= 0一直为true,从而不断启动新的计时器延时执行func
                var last = Date.now() - timestamp;
    
                if(last < wait && last >= 0) {
                    timeout = setTimeout(later, wait - last);
                } else {
                    timeout = null;
                    if(!immediate) {
                        result = func.apply(context, args);
                        if(!timeout) context = args = null;
                    }
                }
            };
            return function() {
                context = this;
                args = arguments;
                timestamp = Date.now();
                // 第一次调用该方法时,且immediate为true,则调用func函数
                var callNow = immediate && !timeout;
                // 在wait指定的时间间隔内首次调用该方法,则启动计时器定时调用func函数
                if(!timeout) timeout = setTimeout(later, wait);
                if(callNow) {
                    result = func.apply(context, args);
                    context = args = null;
                }
    
                return result;
            };
        };
    
        //自动完成渲染
        var tableSelect = new tableSelect();
    
        //FIX 滚动时错位
        if(window.top == window.self){
            $(window).scroll(function () {
                tableSelect.hide();
            });
        }
    
        exports(MOD_NAME, tableSelect);
    })
    
    
    展开全文
  • 通常,我们使用WPS的筛选功能时,输入栏一般会提示以下文字“支持多条件筛选,例如:北京 上海”,只要按照格式输入条件就能一次性筛选出大量的数据,那么Excel中应该如何实现类似的操作呢? #解决办法: 使用...
  • sqlserver里面增加约束条件

    千次阅读 多人点赞 2018-07-04 19:38:33
    1.主键约束:格式为:alter table 表格名称 add constraint 约束名称 增加的约束类型 (列名)例子:alter table emp add constraint ppp primary key (id); 2.check约束:就是给一列的数据进行了限制格式:alter ...
  • 一、问题 最近遇到了一个比较棘手的问题:我有一个可编辑列表,有操作员-经理-总经理三级审批;...角色,权限信息我都可以获取到,目前的问题是,如何修改EasyUI中可编辑表格的【是否可编辑状态】; 该目标实现...
  • 介绍一个用Python对Excel表格数据进行去重、分类、异常处理及分析的实例。
  •  下面是在表格末尾添加数据,由于添加的数据已没有原本的单元格样式,所以需要设置他的单元格样式与上文保持一致。  pandas 如何获取所需数据的索引(判断条件可以改变,结果为列表) import openpyxl from ...
  • 这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 与上篇实践教程一样,这篇文章中,我将继续从一种常见的功能——表格...
  • 10个工作中常用的表格函数

    万次阅读 2018-01-12 09:01:23
    作为表格逻辑判断函数,处处用得到。 函数公式: =IF(测试条件,真值,[假值]) 函数解释: 当第1个参数“测试条件”成立时,返回第2个参数,不成立时返回第3个参数。IF函数可以层层嵌套,来解决...
  • 【需求】给定条件下,table中增加一列:先判断 表tab1 中是否存在列col1 ,如果不存在,则tab1中增加 col1。 【分析】通过一条mysql语句很难实现,alter关键字与where、if等语句不好搭配使用。如果大家有能...
  • layui 中表格单元格中插入下拉框

    万次阅读 热门讨论 2018-10-22 14:55:32
    这个实现采用了layui 社区一位大神的代码,此感谢大神的分享,我自己做个记录,也给使用layui 的小伙伴们做一个分享。 思路是这样的 可以使用自定义模板返回select节点然后done回调中form.render(‘select’);...
  • 本文从三篇表格识别领域的精选论文出发,深入分析了深度学习在表格识别任务中的应用。 表格识别是文档分析与识别领域的一个重要分支,其具体目标是从表格中获取和访问数据及其它有效信息。众所周知,本质上表格是...
  • 1.选中所要设置的区域,执行菜单栏中的“格式”→“条件格式”命令,打开的“条件格式”对话框中的“条件1”下拉列表中选择“公式”,然后右侧的文本框中输入公式“=MOD(ROW(),2)=0”。 2.单击“格式”按钮,...
  • 动态:更新几篇工作中ligerUI的文章。 目的:记录、累积经验;既作自己收藏、同也分享大家。 归档:最近几篇博客全部归档《LigerUI—工作随记》中,方便查阅哈 ...今天核心:LigerUI中根据表单查询条件进行查
  • 参考文章的基础上,增加了扩展。感谢被参考的老哥。 代码直接从日记中复制过来的,不方便复制的可以私信发示例代码,不知道怎么上传附件了。 代码有的地方写的不合理或者错误的,请原谅没有检查仔细; 说明:...
  • 表格存储的 SDK 提供了 BatchGetRow、BatchWriteRow、GetRange 和 createRangeIterator 等多行操作的接口,分页查询和倒序查询,过滤条件查询。批量读(BatchGetRow)批量读接口可以一次请求读取多行数据,参数与 ...
  • 效果图 背景 数据库读取出来的是数字 直接上代码 组件template中: &lt;el-table-column class-name="status-col" label="状态" width="110"...el-tag :typ
  • 业务场景:用于Web页面,序时簿表格数据过滤。需要前端JS与控制层Java代码共同配合完成。 例如,用户打开列表界面之后,只能看到自己录入的数据,或者切换到某个组织之后,只能看到本级组织所属的数据等。 本例中...
  • WEB 表格测试点

    千次阅读 2017-01-06 13:12:47
    Web页面的表格测试点: 1、表格列名 2、表格翻页、表格跳转到多少页、最后一页、首页 3、表格每页显示的数据 4、表格无数据 5、表格支持的最大数据量 ...1、增加:  哪些字段是必填项 、 哪些字段不允许重复、 每
  • 计算与推断思维 五、表格

    万次阅读 2017-11-18 21:05:17
    五、表格 原文:Tables 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 表格是表示数据集的基本对象类型。 表格可以用两种方式查看: 具名列的序列,每列都描述数据集中所有条目的一个方面,或者 ...
  • jQuery表格新增行

    千次阅读 2019-01-18 11:10:44
    jQuery表格新增行 开发工具与关键技术:VS 、jQuery 作者:张赵敏 撰写时间:2019/1/18 **使用jQuery需要引入jQuery的插件,这次我用的是jquery-3.2.1.min.js...截图中我们看到,有三个按钮,我们可以通过按...
  • jquery 实现的树形表格结构

    热门讨论 2014-01-16 17:30:45
    treeTable是跨浏览器、性能很高的...◦接口简洁: 普通表格的基础上增加父子关系的自定义标签就可以 ◦组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 ◦提供两种风格: 通过参数来设置风格
  • 由于项目需求,我所实现的是表格可以添加多个,并且每一个表格内表格行也可以进行动态添加 下面是代码的实现 html代码部分: <draggable v-model="formInline.addFormArr" chosenClass="chosen" ...
  • MYSQL修改插入删除表格数据

    千次阅读 2018-06-04 23:28:04
    数据库博文汇总MYSQL查询表格数据基本操作指南MYSQL中编辑表格相关基本操作指南MYSQL修改插入删除表格数据本篇博客旨在更详细简洁的介绍MYSQl修改表格数据的相关基本操作,包括插入数据、修改数据和删除数据。...
  • 增加了OnSetCellFont事件,可根据条件,动态设置报表中单元格字体和大小,如可将某记录中等于"张三"的字符用大字体显示打印. 15.实现非100%显示比例下编辑和拖动表格线修改单元格宽度等. 16.定义并显示打印上标和下标...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,233
精华内容 34,893
关键字:

如何在表格内增加条件