Lydia's blog

Every day to be a little better


  • Home

  • Archives

  • Search

解决手机端input不能滚动focus

Posted on 2017-11-10 17:44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var mobileOtherInput= function(){
var interval;
$(document).on('touchstart', '#cvs-other .main .other-info-content-item .item-content .item-content-form .fields input.description', function(){
this.focus();
var el=this,ratio=el.scrollWidth/el.value.length;
var inputwidthinchar=$(el).width()/ratio;

clearInterval(interval);
interval=setInterval(function(){
var x=el.selectionStart,x2=el.selectionEnd,width=$(el).width();
if ( (width + 1) > el.scrollWidth) return;
var curposS=x-el.scrollLeft/ratio,
curposE=x2-el.scrollLeft/ratio,
tenper=inputwidthinchar*.1;
if (curposS > tenper && curposE < (inputwidthinchar-tenper) ) return; // only if at edges;
if (curposS < tenper && curposE > (inputwidthinchar-tenper) ) return; // if at both edges, don't do anything;
//center text - good for tapping on spot to be centered
//$(el).scrollLeft(x*ratio-(width/2));

//scroll two char at a time - good for touch and hold at edge and more like expected function
if (curposS < tenper)
$(el).scrollLeft(el.scrollLeft-ratio*2);
else
$(el).scrollLeft(el.scrollLeft+ratio*2);

el.setSelectionRange(x, x2); //not working so well.
},100);
}).blur(function(){
clearInterval(interval);
});
}

input type=date 不显示placeholder

Posted on 2017-11-09 17:14

1.在html中写 input type=area
2.在js中将type变成date
ps:1.手机端会显示键盘不会弹出日期选择框 所以js点击不能用focus方法
要用touchstart方法
并且this.focus() 要添加setTimeout

2.date 选中的字符串格式(“yyyy-mm-dd”)rails不能进行识别存成datetime类型
  要将他变成“yyyy/mm/dd”格式之后存储 但是input type=date 不支持“yyyy/mm/dd”类型的显示
  所以在显示之前还要变回 type="text"

eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var mobileDatePicker = function(){
var sUserAgent = navigator.userAgent;
if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1){
$(document).on('touchstart', 'input.start_at, input.end_at', function(){
this.type = 'month';
setTimeout(function(e) {
this.focus();
},1000)
$(this).change(function() {
this.type = 'text';
myDate = $(this).val().replace("-", "/")
$(this).val(myDate)
});
})

$("input.start_at, input.end_at").focusout(function() {
this.type = 'text';
// this.focusout();
})
}
};

rails- redis

Posted on 2017-11-01 09:44

http://blog.csdn.net/pingpangbing0902/article/details/47104545

先运行redis-server /usr/local/etc/redis.conf

安装完之后新开一个窗口运行
bundle exec sidekiq

rails- 上传图片剪裁

Posted on 2017-10-27 18:44

https://github.com/kirtithorat/carrierwave-crop
api说明 http://www.cnblogs.com/MirageFox/p/4941967.html

vue js - 封装component

Posted on 2017-10-18 14:38

1.slot 可以直接引用代码放进component中
有名字的要在父层代码中的标签上加上 slot =“”
没有名字的直接引了
2.要想从父层代码向component中传不改变的值,在component中声明一个props 然后在父层中绑定(:name=“”)就传进去了
3.如果要双向绑定的话,参考http://duxiao.sweetysoft.com/blog/posts/vuejs-v-model
如果是object的话一定要传value 接口中的值定义也要给一个”value”作为名称
4.在组件中要是想调用父层代码中方法的话
先定义@click=”onClickItem()”
然后 组件中的methods中加上
onClickItem () {
this.$emit(‘on-click-item’)
}
最后在父层需要调用方法的地方
@on_click_item=“xxx”
Xxx是在父层代码中定义的方法gg

error-There was a problem with the editor vi

Posted on 2017-10-18 11:26
1
git config --global core.editor /usr/bin/vim

解决js跨域问题

Posted on 2017-10-18 09:36

1.在代码端, 处理方式不变, 访问 /api + 原接口url:

this.$http.get(‘/api/interface/blogs/all’)…
2.在开发的时候, 继续保持vuejs 的代理存在. 配置代码如下:

proxyTable: {
‘/api’: {
target: ‘http://siwei.me',
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
3.在nginx的配置文件中,加入代理:(详细说明见代码中的注释)

server {
listen 80;
server_name vue_demo.siwei.me;
client_max_body_size 500m;
charset utf-8;
root /opt/app/vue_demo;

# 第一步,把所有的 mysite.com/api/interface  转换成:   mysite.com/interface
location /api {
  rewrite    ^(.*)\/api(.*)$    $1$2;
}

# 第二步, 把所有的 mysite.com/interface 的请求,转发到 siwei.me/interface
location /interface {
  proxy_pass          http://siwei.me;
}

}
就可以了.

也就是说, 上面的配置,把 

http://vue_demo.siwei.me/api/interface/blogs/all
在服务器端做了个变换,相当于访问了:

http://siwei.me/interface/blogs/all
重启nginx , 就会发现生效了.

rails - 省市县三级联动数据脚本

Posted on 2017-09-25 14:30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
require 'httparty'
require File.expand_path(File.dirname(__FILE__) + "/../config/environment")
require 'rails'

# 定义URL
url = "http://www.helloweba.com/demo/cityselect/js/city.js"
response = HTTParty.get url

# 获取 到结果
Province.transaction do
items = JSON.parse(response.body) rescue []
return if items.blank?
items['citylist'].each do |province|
province_name = province['p']
@province = Province.create :name => province_name
Rails.logger.info "province ==!!!!!==!!!!!== #{province_name}"

next if province['c'].blank?
province['c'].each do |city|
city_name = city['n']
@city = City.create :name => city_name, :province_id => @province.id
Rails.logger.info "city ======== #{city_name}"

next if city['a'].blank?
city['a'].each do |town|
town_name = town['s']
@town = Town.create :name => town_name, :city_id => @city.id
Rails.logger.info "town ======== #{town_name}"
end
end
end
end

将直辖市放到城市表中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# -*- encoding : utf-8 -*-     
require File.expand_path(File.dirname(__FILE__) + "/../config/environment")
require 'rails'
Rails.logger.info "=== before "
zhi_xia_shi_ids = [1, 2, 9, 22]
max_city_id = 488
zhi_xia_shi_ids.each do |province_id|
zhi_xia_shi_province = Province.find province_id
# 1. 把直辖市的名字,写入到 cities
city = City.create :name => zhi_xia_shi_province.name,
:province_id => province_id
# 2. 在cities中的直辖市的各个区,写入到 town 中。
towns = City.where('province_id = ? and id < ?', province_id, max_city_id)
towns.each do |town|
Town.create :name => town.name,
:city_id => city.id
# 3. 把 cities 中的直辖市的各个区,都删掉。
town.delete
end
end
Rails.logger.info "=== done"
puts "done"
~

BOM图

Posted on 2017-09-22 15:31

ztreedemo
先将ztree的js文件和css文件放到项目中并引用 图片也加到assets/image中

1
2
//= require jquery.ztree.all.min (放的哪个文件就引用哪个)
*= require ztree

controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
def save_or_update
bom_item = BomItem.find_by_id(params[:id])
if bom_item.present?
bom_item.update_attributes(
name: params[:name],
count: params[:count],
producer: params[:producer]
)
redirect_to :back and return
end
bom_item = BomItem.new(
name: params[:name],
parent_id: params[:parent_id],
bom_file_id: params[:bom_file_id],
count: params[:count],
producer: params[:producer]
)
bom_item.save
redirect_to :back, notice: '操作成功'
end

view–html

1
2
3
<div>
<ul id="bom_tree" class="ztree"></ul>
</div>

view–js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<script>
var ztree , nodes
var setting={
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
},
edit: {
drag: {
autoExpandTrigger: true,
prev: dropPrev,
inner: dropInner,
next: dropNext
},
enable: true,
showRemoveBtn : true,
showRenameBtn : false,
removeTitle : "删除",
renameTitle : "编辑"
},
data: {
simpleData: {
enable: true
}
},
callback:{
onRemove: onRemove,
onDrag: onDrag,
onDrop: onDrop,
}
}
nodes = <%= raw @bom_item_json %>
function onRemove(e, treeId, treeNode) {
if (confirm("确定要删除么?")) {
url = '/bom_items/' + treeNode.id
$.ajax({
url: url,
type: 'DELETE',
success: function(result) {
console.info("== 树的内容已经删除")
}
});
}else{
location.reload()
}
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
// 编辑按钮
var editStr = "<span class='button edit' id='editBtn_" + treeNode.tId
+ "' title='edit node' onfocus='this.blur();'></span>";
sObj.after(editStr);
var btn = $("#editBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
open_dialog("/bom_items/ajax_new_form?id="+ treeNode.id )
});
// 新增按钮
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
open_dialog("/bom_items/ajax_new_form?bom_file_id=<%= params[:bom_file_id]%>&&parent_id="+ treeNode.id )
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
$("#editBtn_"+treeNode.tId).unbind().remove();
};
$(function(){
ztree = $.fn.zTree.init($('#bom_tree'), setting, nodes)
})
$("#new_root").click(function(){
console.info("点了")
url = '/bom_items/?&bom_file_id=' + <%= params[:bom_file_id]%>
$.post(url, function(){
console.info("== 根节点已经创建")
location.reload();
})
});
function dropPrev(treeId, nodes, targetNode) {
var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=nodes.length; i<l; i++) {
var curPNode = nodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function dropInner(treeId, nodes, targetNode) {
if (targetNode && targetNode.dropInner === false) {
return false;
} else {
for (var i=0,l=nodes.length; i<l; i++) {
if (!targetNode && nodes[i].dropRoot === false) {
return false;
} else if (nodes[i].parentTId && nodes[i].getParentNode() !== targetNode && nodes[i].getParentNode().childOuter === false) {
return false;
}
}
}
return true;
}
function dropNext(treeId, nodes, targetNode) {
var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=nodes.length; i<l; i++) {
var curPNode = nodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function onDrag(event, treeId, treeNodes) {
}
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
if(confirm('确定放在这里么?')){
url = '/bom_items/' + treeNodes[0].id + '?parent_id=' + treeNodes[0].pId
$.ajax({
url: url,
type: 'PATCH',
success: function(result) {
console.info("== 拖拽成功")
}
});
} else {
location.reload()
}
}
</script>

注意:在这里没有用封装好的编辑方法 因为需要弹窗 否则可以直接用onRename方法
详情可见ztreeAPI文档

vue.js--表格搜索功能

Posted on 2017-09-13 19:28

1.添加一个component search/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
<table style="color: #3b3b3b;">
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key == 'name' ? '物品名称' : '是否购买'}}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns" @click="get_good(entry)">
<div v-if="key == 'is_chosen'">
{{ entry[key] == false ? '没有购买' : '已经购买'}}
</div>
<div v-else>
{{ entry[key] }}
</div>
</td>
</tr>
</tbody>
</table>
</template>

<script>
export default {
data () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
currentValue: [], sortKey: '',
sortOrders: sortOrders
}
},
props: {
value: Array,
columns: Array,
filterKey: String
},
created () {
this.currentValue = this.value
},
watch: {
value (val) {
this.currentValue = val
},
currentValue (newVal) {
this.$emit('input', newVal)
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.currentValue
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
},
get_good(entry){
console.info(entry)
this.$emit("get-good", entry)
}
}
}
</script>

<style lang="scss" scoped>
@import "../../styles/px2rem.scss";
@import "../../styles/variable.scss";
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}

table {
background-color: #fff;
@include px2rem(width, 200px);
text-align: left;
}

th {
color: #3b3b3b;
cursor: pointer;
user-select: none;
}

td {
background-color: #f9f9f9;
}

th, td {
@include px2rem(min-width, 90px);
padding: 10px 20px;
}

th.active {
color: #fff;
}

th.active .arrow {
opacity: 1;
}

.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}

.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}

.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
</style>

2.在使用的页面上

1
2
3
4
5
6
7
8
9
10
11
12
<div  class="search">
搜索:<input v-model="search" name="search"/>
<div class='close' @click="show_search_page = false">
x
</div>
</div>
<div style="overflow: auto; background-color: #FFFFFF; ">
<search v-model="all_goods"
:columns="gridColumns"
:filter-key="search" class="search_table" @get-good='get_good'>
</search>
</div>

演示
官方文档
github

1…181920…28

Lydia

This is lydia's blog

277 posts
1 categories
46 tags
© 2020 Lydia
Powered by Hexo
|
Theme — NexT.Muse v5.1.4