<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.qtrmoon.com/tags-dictionary" prefix="dc"%>
<!DOCTYPE html>
<html>
<head>
<title>AniJS demo</title><!--rstStudents-->
<%@include file="/common/include.jsp" %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/${projectName}/gridstack/gridstack.css" />
<link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="/${projectName}/gridstack/gridstack.js"></script>
<script src="/${projectName}/gridstack/gridstack.all.js"></script>
<script type="text/javascript" src="/${projectName}/Echartsjs/echarts.js" ></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.moveBar{padding:5px 10px;background:rgba(0,0,0,.0);border-bottom:#dadada 1px dashed;text-align:right;cursor:move;}
.moveBar:hover{background:rgba(0,0,0,.2);border-bottom:#999 1px solid;}
.moveBar i{cursor:pointer;color:silver;}
.moveBar i:hover{color:white;}
</style>
</head>
<body>
<div class="container-fluid">
<h1>knockout.js Demo</h1>
<div>
<button data-bind="click: addNewWidget">Add new widget</button>
</div>
<br>
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
</div>
<script type="text/javascript">
ko.components.register('dashboard-grid', {
viewModel: {
createViewModel: function (controller, componentInfo) {
var ViewModel = function (controller, componentInfo) {
var grid = null;
this.widgets = controller.widgets;
this.afterAddWidget = function (items) {
if (grid == null) {
grid = $(componentInfo.element).find('.grid-stack').gridstack({
auto: false
}).data('gridstack');
}
var item = _.find(items, function (i) { return i.nodeType == 1 });
grid.addWidget(item);
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
grid.removeWidget(item);
});
};
};
return new ViewModel(controller, componentInfo);
}
},
template:
[
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
' <div class="grid-stack-item-content" data-bind="change: $root.getMove">',
' <div class="moveBar" >',
' <i class="icon-trash" data-bind="click: $root.deleteWidget"/>',
/* ' <button data-bind="click: $root.deleteWidget">Delete me</button>', */
' </div>' ,
' <div class="qtrchart" style="width:100%;height:'+4*60+'px;"></div>',
' </div>',
' </div>',
'</div> '
].join('')
});
$(function () {
var Controller = function (widgets) {
var self = this;
this.widgets = ko.observableArray(widgets);
this.addNewWidget = function () {
this.widgets.push({
/* x: 0,
y: 5,
width: Math.floor(1 + 3 * Math.random()),
height: Math.floor(1 + 3 * Math.random()), */
x: 0,
y: 4,
width: /* Math.floor( */1 + 3 /* * Math.random()) */,
height: /* Math.floor( */1 + 3 /* * Math.random()) */,
auto_position: false // 这个是显示在一行
});
return false;
};
this.deleteWidget = function (item) {
console.info(item);
self.widgets.remove(item);
//console.info(widgets);
return false;
};
// 这个是那个 移动之后的 改变事件
this.getMove = function(item){
console.info(item);
//console.info(event);
return false;
}
};
var widgets = [
{x: 0, y: 0, width: 4, height: 4},
{x: 4, y: 0, width: 4, height: 4},
{x: 8, y: 0, width: 4, height: 4},
{x: 0, y: 4, width: 4, height: 4},
{x: 4, y: 4, width: 4, height: 4},
{x: 8, y: 4, width: 4, height: 4}
];
var controller = new Controller(widgets);
ko.applyBindings(controller);
});
</script>
</body>
</html>
我按照例子 还有手头看过的代码 试着做了一下 上面代码使用了knockout.js 学习了一下 但是 就获取 gridstack 没有办法 获取
{ x，y，width，height}
在gitHub gridsack 作者哪里的 demo 还有 api 里面 看到 使用float.html 这个例子 加上下面事件，无knockout.js
$('.grid-stack').on('change', function(event, items) {
console.log('更改item added');
console.log(items);
}) 这个改变的事件， 这个是可以输出的 但是使用上面的 knockout.js 我尝试着 绑定事件 但是没有获取到 对应的值
我就是像做一下 这个窗口的大小后 通过change 事件 获取 当前改变的{x，y，width，height}
谢谢大佬们！O(∩_∩)O
回答
相似问题
腾讯云开发者
