|
@@ -4,6 +4,133 @@
|
|
|
<head>
|
|
|
<title>呵呵商品管理</title>
|
|
|
<meta name="decorator" content="default"/>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.42857143;
|
|
|
+ color: #666;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hidden {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ .selectPickerWrapper * {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .selectPickerWrapper {
|
|
|
+ position: relative;
|
|
|
+ /* margin: 50px; */
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .select-picker-search {
|
|
|
+ width: 200px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .select-picker-search-checked {
|
|
|
+ position: relative;
|
|
|
+ width: 180px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+ .select-picker-search-checked:after {
|
|
|
+ border: 5px solid transparent;
|
|
|
+ content: ' ';
|
|
|
+ height: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ top: 12.2px;
|
|
|
+ border-top: 8px solid #666;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .select-picker-options-wrp {
|
|
|
+ display: none;
|
|
|
+ width: 200px;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .select-picker-options-serch input {
|
|
|
+ width: 160px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin: 12px 0 0 10px;
|
|
|
+ padding-left: 8px;
|
|
|
+ }
|
|
|
+ .select-picker-options-serch input:focus {
|
|
|
+ border-color: #2fa4e7;
|
|
|
+ outline: 0;
|
|
|
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
|
|
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
|
|
+ }
|
|
|
+ .select-picker-options-list {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ .select-picker-options-list-item {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 36px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+ .select-picker-options-list-item:hover {
|
|
|
+ background: #ebf1f5;
|
|
|
+ }
|
|
|
+ .duihao {
|
|
|
+ display: inline-block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 3px;
|
|
|
+ transform: translateY(4px);
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .duihao-checked {
|
|
|
+ background: #2fa4e7;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .duihao-checked:before,
|
|
|
+ .duihao-checked::after {
|
|
|
+ content: '';
|
|
|
+ height: 10px;
|
|
|
+ width: 2px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: block;
|
|
|
+ background: white;
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 10px;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ -ms-transform: rotate(45deg);
|
|
|
+ }
|
|
|
+ .duihao-checked::before {
|
|
|
+ height: 6px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ -ms-transform: rotate(-45deg);
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 5px;
|
|
|
+ }
|
|
|
+ .duihao-nocheck {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
<script type="text/javascript">
|
|
|
$(document).ready(function() {
|
|
|
//$("#name").focus();
|
|
@@ -28,6 +155,112 @@
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+ ;(function ($, window, document, undefined) {
|
|
|
+ //用一个自调用匿名函数把插架代码包裹起来,防止代码污染
|
|
|
+ $.fn.mySelect = function (options) {
|
|
|
+ var defaults = {
|
|
|
+ //defaults 使我们设置的默认参数。
|
|
|
+ callback: function (res) {
|
|
|
+ console.log(res)
|
|
|
+ },
|
|
|
+ }
|
|
|
+ var options = $.extend(defaults, options) //将传入参数和默认参数合并
|
|
|
+ var $this = $(this) //当然响应事件对象
|
|
|
+ var selectValues = []
|
|
|
+ //生成option-item并追加展示
|
|
|
+ var html = ''
|
|
|
+ html += '<div class="select-picker-search">'
|
|
|
+ html += '<div class="select-picker-search-checked">请选择</div>'
|
|
|
+ html += '</div>'
|
|
|
+ html += '<div class="select-picker-options-wrp">'
|
|
|
+ // html += '<div class="select-picker-options-serch">';
|
|
|
+ // html += '<input type="text" placeholder="">';
|
|
|
+ // html += '</div>';
|
|
|
+ html += '<div class="select-picker-options-list">'
|
|
|
+ $this.find('option').each(function () {
|
|
|
+ let _this = $(this)
|
|
|
+ html += '<div class="select-picker-options-list-item"'
|
|
|
+ html += 'value="' + _this.attr('value') + '">'
|
|
|
+ html += '<b class="duihao duihao-nocheck"></b>'
|
|
|
+ html += '<span>' + _this.text() + '</span>'
|
|
|
+ html += '</div>'
|
|
|
+ })
|
|
|
+ html += '</div>'
|
|
|
+ html += '</div>'
|
|
|
+ $this.append(html)
|
|
|
+ // 下拉显示隐藏
|
|
|
+ $this.on('click', '.select-picker-search', function (e) {
|
|
|
+ //功能代码部分,绑定事件
|
|
|
+ $(this).next('.select-picker-options-wrp').toggle()
|
|
|
+ // $(this).next('.select-picker-options-wrp').find('.select-picker-options-serch input').focus()
|
|
|
+ })
|
|
|
+ // 点击选中或不选
|
|
|
+ $this.on('click', '.select-picker-options-list-item', function () {
|
|
|
+ let _this = $(this)
|
|
|
+ if (_this.find('.duihao-nocheck').length > 0) {
|
|
|
+ _this.find('.duihao').removeClass('duihao-nocheck').addClass('duihao-checked')
|
|
|
+ } else {
|
|
|
+ _this.find('.duihao').addClass('duihao-nocheck').removeClass('duihao-checked')
|
|
|
+ }
|
|
|
+ // 循环遍历options中选中的项添加到选项栏中
|
|
|
+ var checkedArr = []
|
|
|
+ selectValues = []
|
|
|
+ $this.find('.select-picker-options-list-item').each(function () {
|
|
|
+ let _this = $(this)
|
|
|
+ if (_this.find('.duihao-checked').length > 0) {
|
|
|
+ checkedArr.push($.trim(_this.text()))
|
|
|
+ selectValues.push(_this.attr('value'))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (checkedArr.length > 0) {
|
|
|
+ $this.find('.select-picker-search-checked').text(checkedArr.join(','))
|
|
|
+ // $this.find('.select-picker-search-checked').text(checkedArr.join(',')).css('color', '#fff');
|
|
|
+ } else {
|
|
|
+ $this.find('.select-picker-search-checked').text('请选择').css('color', '#757575')
|
|
|
+ }
|
|
|
+ // 回调
|
|
|
+ options.callback(selectValues)
|
|
|
+ })
|
|
|
+ // 前端实现下拉搜索
|
|
|
+ // $this.on('keyup', '.select-picker-options-serch input', function () {
|
|
|
+ // var text = $(this).val()
|
|
|
+ // var html = ''
|
|
|
+ // $this.find('option').each(function () {
|
|
|
+ // let _this = $(this)
|
|
|
+ // if (_this.text().indexOf(text) != -1) {
|
|
|
+ // html += '<div class="select-picker-options-list-item">'
|
|
|
+ // html += '<b class="duihao duihao-nocheck"></b>'
|
|
|
+ // html += '<span>' + _this.text() + '</span>'
|
|
|
+ // html += '</div>'
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // if (html == '') {
|
|
|
+ // html += '<p style="text-align:center;">没有相关内容</p>'
|
|
|
+ // }
|
|
|
+ // $this.find('.select-picker-options-list').html('').append(html)
|
|
|
+ // })
|
|
|
+ // 点击document任意地方 下拉消失
|
|
|
+ $(document).click(function (event) {
|
|
|
+ var _con = $('.select-picker-options-wrp') // 设置目标区域
|
|
|
+ var _con2 = $('.select-picker-search-checked') // 设置目标区域
|
|
|
+ if (!_con2.is(event.target) && !_con.is(event.target) && _con.has(event.target).length === 0) {
|
|
|
+ // Mark 1
|
|
|
+ $('.select-picker-options-wrp').hide() //淡出消失
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })(jQuery, window, document)
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ $('#demo1').mySelect({
|
|
|
+ callback: function (res) {
|
|
|
+ console.log(res);
|
|
|
+ $("#floorIds").val(res)
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
@@ -39,6 +272,7 @@
|
|
|
<form:hidden path="id"/>
|
|
|
<form:hidden path="productId" id="productId"/>
|
|
|
<sys:message content="${message}"/>
|
|
|
+ <form:hidden path="floorIds"/>
|
|
|
<div class="control-group">
|
|
|
<label class="control-label"><font color="red">*</font>商品:</label>
|
|
|
<div class="controls" id="addProduct">
|
|
@@ -124,24 +358,29 @@
|
|
|
</form:select>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <%--<div class="control-group">
|
|
|
- <label class="control-label">首页楼层:</label>
|
|
|
- <div class="controls">
|
|
|
- <form:select path="floorId" class="input-small">
|
|
|
- <form:option value="" label="请选择"/>
|
|
|
- <form:options items="${floorList}" itemLabel="title" itemValue="id" htmlEscape="false"/>
|
|
|
- </form:select>
|
|
|
+ <c:if test="${cmHeheProduct.id eq null}">
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">首页楼层:</label>
|
|
|
+ <div class="controls" style="overflow: visible">
|
|
|
+ <div id="demo1" class="selectPickerWrapper">
|
|
|
+ <select class="hidden" multiple="multiple" id="select">
|
|
|
+ <c:forEach items="${floorList}" var="floor">
|
|
|
+ <option value="${floor.id}" checked="${floor.checked?'checked':''}">${floor.title}</option>
|
|
|
+ </c:forEach>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="control-group">
|
|
|
- <label class="control-label">商城活动:</label>
|
|
|
- <div class="controls">
|
|
|
- <form:select path="activityId" class="input-small">
|
|
|
- <form:option value="" label="请选择"/>
|
|
|
- <form:options items="${activityList}" itemLabel="name" itemValue="id" htmlEscape="false"/>
|
|
|
- </form:select>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">商城活动:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="activityId" class="input-small">
|
|
|
+ <form:option value="" label="选择活动"/>
|
|
|
+ <form:options items="${activityList}" itemLabel="name" itemValue="id" htmlEscape="false"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>--%>
|
|
|
+ </c:if>
|
|
|
<div class="form-actions">
|
|
|
<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
|
|
|
<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
|