如何在表格内增加条件

HTML5 使用JQuery对表格进行增加列操作

千次阅读 2019-05-26 09:48:18

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>
 
代码效果:

收起

展开全文

HTML5 JQuery

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

2020-12-29 17:37:33

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
        }
      },

收起

展开全文

vue javascript

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 = "不能为空";
		}
	}

}

收起

展开全文

layui tableSelect 数据表格下拉框条件查询

千次阅读 2020-10-16 14:53:31

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);
})

收起

展开全文

用Excel筛选功能实现WPS表格多条件筛选功能
千次阅读 2020-01-18 10:34:12
通常，我们使用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】如何根据条件控制可编辑表格某字段是否可以编辑；
千次阅读 2019-03-13 19:09:51
一、问题最近遇到了一个比较棘手的问题：我有一个可编辑列表，有操作员-经理-总经理三级审批；...角色，权限信息我都可以获取到，目前的问题是，如何修改EasyUI中可编辑表格的【是否可编辑状态】；该目标实现...
收起
EasyUI table datagrid row
用 Python 对 Excel 表格内数据进行去重、分类，标记异常及分析
千次阅读 多人点赞 2020-07-04 13:34:58
介绍一个用Python对Excel表格数据进行去重、分类、异常处理及分析的实例。
收起
python Excel 数据分析异常处理去重
openpyxl 解析电子表格（.xlsx）数据,末尾增加一行，且保留原格式
千次阅读 2018-10-15 09:58:10
下面是在表格末尾添加数据，由于添加的数据已没有原本的单元格样式，所以需要设置他的单元格样式与上文保持一致。 pandas 如何获取所需数据的索引（判断条件可以改变，结果为列表） import openpyxl from ...
收起
openpyxl 单元格样式
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
万次阅读 2017-03-06 07:41:55
这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下与上篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格...
收起
10个在工作中常用的表格函数
万次阅读 2018-01-12 09:01:23
作为表格逻辑判断函数，处处用得到。函数公式： =IF（测试条件，真值，[假值]）函数解释：当第1个参数“测试条件”成立时，返回第2个参数，不成立时返回第3个参数。IF函数可以层层嵌套，来解决...
收起
python实现在mysql数据表中按条件alter增加一列（字段）
千次阅读 2019-04-14 23:55:16
【需求】在给定条件下，在table中增加一列：先判断表tab1 中是否存在列col1 ，如果不存在，则在tab1中增加 col1。【分析】通过一条mysql语句很难实现，alter关键字与where、if等语句不好搭配使用。如果大家有能...
收起
在layui 中表格单元格中插入下拉框
万次阅读 热门讨论 2018-10-22 14:55:32
这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。思路是这样的可以使用自定义模板返回select节点然后在done回调中form.render(‘select’);...
收起
layui
三篇论文，纵览深度学习在表格识别中的最新应用
千次阅读 2020-08-17 12:14:54
本文从三篇表格识别领域的精选论文出发，深入分析了深度学习在表格识别任务中的应用。表格识别是文档分析与识别领域的一个重要分支，其具体目标是从表格中获取和访问数据及其它有效信息。众所周知，本质上表格是...
收起
神经网络大数据自然语言处理算法编程语言
Excel 利用“条件格式”命令快速设置数据表格的阴影间隔效果
千次阅读 2013-12-16 23:55:43
1．选中所要设置的区域，执行菜单栏中的“格式”→“条件格式”命令，在打开的“条件格式”对话框中的“条件1”下拉列表中选择“公式”，然后在右侧的文本框中输入公式“=MOD(ROW(),2)=0”。 2．单击“格式”按钮，...
收起
LigerUI中根据表单查询条件进行查询，使用表格Grid展示
万次阅读 2013-11-14 20:11:45
动态：更新几篇工作中ligerUI的文章。目的：记录、累积经验；既作自己收藏、同也分享大家。归档：最近几篇博客全部归档在《LigerUI—工作随记》中，方便查阅哈 ...今天核心：LigerUI中根据表单查询条件进行查
收起
前端框架 ligerui
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新...
万次阅读 多人点赞 2019-09-12 14:33:13
在参考文章的基础上，增加了扩展。感谢被参考的老哥。代码直接从日记中复制过来的，不方便复制的可以私信发示例代码，不知道怎么上传附件了。代码有的地方写的不合理或者错误的，请原谅没有检查仔细；说明：在...
收起
poi java word java poi
TableStore表格存储（阿里云OTS）多行数据操作查询,支持倒序,过滤条件和分页
千次阅读 2018-01-19 09:37:19
表格存储的 SDK 提供了 BatchGetRow、BatchWriteRow、GetRange 和 createRangeIterator 等多行操作的接口,分页查询和倒序查询，过滤条件查询。批量读（BatchGetRow）批量读接口可以一次请求读取多行数据，参数与 ...
收起
tableStore 阿里云OTS
Element-ui table中过滤条件变更表格内容和Status 来显示不同颜色
万次阅读 2018-04-21 19:05:58
效果图背景数据库读取出来的是数字直接上代码组件template中： <el-table-column class-name="status-col" label="状态" width="110"...el-tag :typ
收起
vue element status table 过滤
EAS8.0，WAF2，Web页面、序时簿表格数据过滤、数据隔离、过滤条件
千次阅读 2017-06-10 10:19:08
业务场景：用于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 自豪地采用谷歌翻译表格是表示数据集的基本对象类型。表格可以用两种方式查看：具名列的序列，每列都描述数据集中所有条目的一个方面，或者 ...
收起
第22章　表格开发
收起
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合并图片等 ◦提供两种风格: 通过参数来设置风格
收起
element-ui+vue实现表格动态添加表格行，并且可以进行上下移动
千次阅读 2021-05-07 14:37:12
由于项目需求，我所实现的是表格可以添加多个，并且每一个表格内的表格行也可以进行动态添加下面是代码的实现 html代码部分： <draggable v-model="formInline.addFormArr" chosenClass="chosen" ...
收起
MYSQL修改插入删除表格数据
千次阅读 2018-06-04 23:28:04
数据库博文汇总MYSQL查询表格数据基本操作指南MYSQL中编辑表格相关基本操作指南MYSQL修改插入删除表格数据本篇博客旨在更详细简洁的介绍MYSQl修改表格数据的相关基本操作，包括插入数据、修改数据和删除数据。...
收起
MYSQL
表格式报表处理系统creport_v412
2011-07-17 15:55:08
增加了OnSetCellFont事件,可根据条件,动态设置报表中单元格字体和大小,如可将某记录中等于"张三"的字符用大字体显示打印. 15.实现非100%显示比例下编辑和拖动表格线修改单元格宽度等. 16.定义并显示打印上标和下标...
收起

HTML5 使用JQuery对表格进行增加列操作

HTML5 使用JQuery对表格进行操作

style样式代码:

主体部分代码:

代码效果:

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

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

MINIUI 表格内修改及各控件使用

表格界面整体展示

1、功能介绍：

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

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

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

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

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

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

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

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

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

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

layui tableSelect 数据表格下拉框 条件查询

效果图：

步骤：

1，引入插件tableSelect

2，页面样式

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

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

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

附件：tableSelect插件代码

用Excel筛选功能实现WPS表格多条件筛选功能

sqlserver里面增加约束条件

【EasyUI】如何根据条件控制可编辑表格某字段是否可以编辑；

用 Python 对 Excel 表格内数据进行去重、分类，标记异常及分析

openpyxl 解析电子表格（.xlsx）数据,末尾增加一行，且保留原格式

Vue.js实现多条件筛选、搜索、排序及分页的表格功能

10个在工作中常用的表格函数

python实现在mysql数据表中按条件alter增加一列（字段）

在layui 中表格单元格中插入下拉框

三篇论文，纵览深度学习在表格识别中的最新应用

Excel 利用“条件格式”命令 快速设置数据表格的阴影间隔效果

LigerUI中根据表单查询条件进行查询，使用表格Grid展示

java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新...

TableStore表格存储（阿里云OTS）多行数据操作查询,支持倒序,过滤条件和分页

Element-ui table中过滤条件变更表格内容和Status 来显示不同颜色

EAS8.0，WAF2，Web页面、序时簿表格数据过滤、数据隔离、过滤条件

WEB 表格测试点

计算与推断思维 五、表格

第22章 表格开发

jQuery表格新增行

jquery 实现的树形表格结构

element-ui+vue实现表格动态添加表格行，并且可以进行上下移动

MYSQL修改插入删除表格数据

表格式报表处理系统creport_v412

如何在表格内增加条件

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

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

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

layui tableSelect 数据表格下拉框条件查询

Excel 利用“条件格式”命令快速设置数据表格的阴影间隔效果

计算与推断思维五、表格

第22章　表格开发