underscore.js的使用
程序员文章站
2022-06-03 11:57:33
...
插入html元素
underscore的模板
时间控件
<div style="margin-bottom: 30px">
<form class="form form-inline" id="query-form">
<div class="input-group">
<input type="text" name="start" class="form-control time-start "
placeholder="起始时间"/>
</div>
<div class="input-group">
<input type="text" name="end" class="form-control time-end"
placeholder="截止时间"/>
</div>
<button type="button" class="btn btn-primary btn-filter">查询</button>
</form>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>时间</th>
<th>收入</th>
<th>参与人数</th>
<th>浏览量</th>
<th>活动数</th>
</tr>
</thead>
<tbody id="biz_detail">
</tbody>
</table>
获取时间
var QueryForm = {
el: $("#query-form"),
init: function () {
this.el.on('click', '.btn-filter', function () {
Chart.get();
BizDetail.init()
});
this.el.find('.time-start').datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-cn',
}).on('dp.change', function (e) {
var date = e.date.format('YYYY-MM-DD');
}).on('hide', function (e) {
});
this.el.find('.time-end').datetimepicker({
locale: 'zh-cn',
format: 'YYYY-MM-DD',
}).on('changeDate', function (e) {
}).on('changeYear', function (e) {
});
return this;
},
getData: function () {
return this.el.serializeArray();
}
};
<script id="each_detail" type="text/html">
<tr>
<th><%=date%></th>
<th><%=register_num%></th>
<th><%=income%></th>
<th><%=visit_num%></th>
<th><%=join_num%></th>
</tr>
</script>
var BizDetail = {
api: '{% url 'each_biz_api'%}' + '?id=' + biz_id,
tmpl_detail: _.template($('#each_detail').html()),
onData: function (json) {
if (json.status === 200) {
var chain = _.sortBy(json.data,'date');
var html_detail = _.map(chain, function (item, idx) {
return this.tmpl_detail(item);
}.bind(this)).join('');
$('#biz_detail').html(html_detail);
}
},
init: function () {
var data = QueryForm.getData();
console.log(data)
$.get(this.api, data, this.onData.bind(this), 'json');
}
};
上一篇: 空心菜的功效与禁忌有哪些早知早好
下一篇: 冠生园月饼价格,冠生园云腿月饼好吃吗
推荐阅读