- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想创建一个下拉列表,它将以表格形式包含多个列。假设下拉列表的列为 Id、Result、Count。它尝试使用 ui.select 选项,但是在生产中部署时效果不佳。谁能帮我 ?请提出替代方案(如果有)。
请找到我所指的示例代码。并且引用的链接是 http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<table style="table table-bordered" cellspacing="0" cellpadding="10" width="280px">
<tr class="reportHeader">
<td align="left" style="width:50px">ID</td>
<td align="right" style="width:10px"></td>
<td align="left" style="width:160px">Name</td>
<td align="right" style="width:60px">Records</td>
</tr>
</table>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<table cellspacing="0" cellpadding="10" width="280px">
<tr>
<td align="left" style="width:100px">{{person.name}}</td>
<td align="left" style="width:10px"></td>
<td align="left" style="width:200px">{{person.email}}</td>
<td align="left" style="width:10px"></td>
<td align="left" style="width:60px"><span ng-bind-html="''+person.age | highlight: $select.search"></span></td>
</tr>
</table>
</ui-select-choices>
</ui-select>
最佳答案
如果有人仍在寻找解决方案:
<style>
.selectedOrder {
height: 30px;
display:none;
}
/* class applies to select element itself, not a wrapper element */
.select-css {
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
/* width: 100%; */
max-width: 100%; /* useful when width is set to anything other than 100% */
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
*/
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
display: none;
}
/* Hover style */
.select-css:hover {
border-color: #888;
}
/* Focus style */
.select-css:focus {
border-color: #aaa;
/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
/* Set options to normal weight */
.select-css option {
font-weight:normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}
/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}
</style>
<div id="orderSelectContainer">
<div id="selectedOrder" class="selectedOrder select-css" style="width: 533px; display: block;">
<div class="currentSelectedOrder" data-value="45628" style="float: left;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div id="orderSelect" class="select-css" style="position: absolute; z-index: 1000; background-image: none; display: none;">
<div class="orderContainer">
<div class="order" data-value="45628" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45536" style="float: left; background: lightblue;">
<span style="float:left; min-width:200px;">Store 2</span>
<span style="float:left; min-width:50px"> 55536</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45682" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 3</span><span style="float:left; min-width:50px"> 55682</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45625" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 4</span>
<span style="float:left; min-width:50px"> 55625</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45556" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 5</span>
<span style="float:left; min-width:50px"> 55556</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
</div>
<br style="clear:both"><br>
</div>
<script>
$(document).on(`click`, `.order`, function() {
if ($(this).data(`value`) !== $(`#selectedOrder >.currentSelectedOrder`).data(`value`)) {
$(`#orderContainer`).html(``);
}
$(`#selectedOrder`).html($(this).prop(`outerHTML`)).find(`.order`).removeClass(`order`).css(`background`, ``).addClass(`currentSelectedOrder`);
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
$(`#selectedOrder`).show();
$(`#orderSelect`).hide();
});
$(document).on(`click`, `#selectedOrder`, function() {
//$(`#selectedOrder`).hide();
$(`#orderSelect`).toggle();
});
$(document).on(`mouseenter`, `.order`, function() {
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
});
$(document).on(`mouseexit`, `.order`, function() {
$(this).css(`background`, `white`);
});
<script>
工作 fiddle :https://jsfiddle.net/schmidtc63/xu8zgpc9/
关于html - AngularJS:多列下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36299438/
我有两个具有不同格式的相似数据的数据框 df1: Nodo X Y Z CTB3901 CTBX3901 CTBY3901 CTBZ3901
这个问题在这里已经有了答案: Using tuples in SQL "IN" clause (9 个回答) 关闭 8 年前。 我尝试获得一些满足特定条件的用户: SELECT * FROM use
我目前正在使用 MySQL (5.7) 来查询成员表。 当我执行如下查询时: SELECT fname, lname, added FROM Members WHERE ((fname, lname)
我正在使用 CSS 创建多个列,以提供与 Pinterest 界面类似的外观(例如,框列,但整齐地堆叠在彼此之下)。 这是我使用的代码: #feed-post-home .feed { -mo
我正在使用 VLookup 函数来查找列中存在的多个值。这工作得很好,但只需要很多时间,因为我在 Excel 表中有 100,000 行。 有什么办法可以加快这段代码的速度吗? 该代码基本上在列中查找
如果这个词正确的话,我有 4 列和 4 个不同的参数。每个参数大约有 3-5 个变量。我想做的是在维护不同列的同时创建 4 个不同参数的所有可能组合。因此,假设我有以下示例: **Column A |
我正在尝试使用 arrange_()使用字符串输入并按降序排列在其中一列中。 library(dplyr) # R version 3.3.0 (2016-05-03) , dplyr_0.4.3 #
我只是想知道是否有可以包含多列的 wpf 组合框控件? 如果没有,我需要使用什么 XAML 来实现这一目标? 如果可能的话,我只是在寻找一个基本的两列组合框, 谢谢 最佳答案 请引用这些链接 多列组合
我想使用 Select 根据第二个表中的值更新表中的多个列语句来获取这样的值: UPDATE tbl1 SET (col1, col2, col3) = (SELECT colA, colB, col
如果我们需要根据给定列的某些值集查询表,我们可以简单地使用 IN 子句。 但是如果需要基于多列执行查询,我们不能使用 IN 子句(在 SO 线程中 grepped)。 从其他 SO 线程,我们可以使用
我需要用分隔值拆分表中两列的值。 我的源表如下所示: 产品IDean_upc已批准21029618710103368021;8710103368038;87101033680141;0;1929236
我正在尝试在 WPF 中创建一个包含多列的 TreeView 。我很清楚,关于这个主题确实有很多问题。但是,他们在绑定(bind)数据时似乎采用了不同的方法。每个人似乎都设置了 itemssource
我正在尝试使用以下数据在 Excel 中创建数据透视表: 我试图得出的最终结果(使用枢轴)是这样的摘要: 但是我不知道如何让 Excel 计算/添加/考虑所有列。我可以为每个单独的字段/列创建一个数据
我正在尝试在 WPF 中创建一个包含多列的 TreeView 。我很清楚,关于这个主题确实有很多问题。但是,他们在绑定(bind)数据时似乎采用了不同的方法。每个人似乎都设置了 itemssource
如何在最多几列的每行返回 1 个值: 表名 [Number, Date1, Date2, Date3, Cost] 我需要返回这样的东西: [Number, Most_Recent_Date, Cos
我有两个数据框想要连接在一起(自行车骑行数据框和自行车站数据框)。 我一直在使用 pandas 库,但我似乎无法编写代码来完美地操作连接。最初,我只是加入关键“station_id”,但我发现最近更新
我有以下 csv 文件,我想要内部联接 CSV 1:Trip_Data.csv (250MB) head -2 rand_trip_data_1.csv medallion,hack_license,
我知道以前也有人问过类似的问题。但是,我的问题略有不同。我正在尝试跨多个列获取 merge_asof 的功能。这是数据集: import pandas as pd left = pd.DataFram
我有一个数据库,里面保存着客户的数据。我需要知道我们在各个城市和国家有多少客户。我必须用单个查询来完成它。 我的表是客户,我有城市和国家列(均为varchar),其中包含有关它的信息。 所需的查询输出
我需要左连接两个表:Cardealers 和Applications。 我想查看哪些信用卡经销商收到了哪些申请。 每个申请都会转发给三个发卡商,因此我的表结构具有以下 3 列:receiver_1、r
我是一名优秀的程序员,十分优秀!