SlickGrid example 6:Ajax加载

来源：互联网发布：微电网系统运行优化编辑：程序博客网时间：2024/05/16 07:39

响应鼠标事件，可以左键快捷选择切换选项，可右键弹出菜单栏。

代码：

<!DOCTYPE HTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<title>SlickGrid example 7:Events</title>

<style>

.cell-title {

font-weight: bold;

}

#contextMenu {

background: #e1efc7;

border: 1px solid gray;

padding: 2px;

display: inline-block;

min-width: 100px;

-moz-box-shadow: 2px 2px 2px silver;

-webkit-box-shadow: 2px 2px 2px silver;

z-index: 99999;

}

#contextMenu li {

padding: 4px 4px 4px 14px;

list-style: none;

cursor: pointer;

background: url("../images/arrow_right_peppermint.png") no-repeatcenter left;

}

#contextMenu li:hover{

background-color: white;

}

</style>

</head>

<body>

<tr>

<tdvalign="top" width="50%">

</td>

<tdvalign="top">

<h2>Demonstrates:</h2>

<ul>

<li>handlingevents from the grid:</li>

<li>Right-clickthe row to open the contextmenu</li>

<li>Click thepriority cell to togglevalues</li>

</ul>

</td>

</tr>

</table>

<b>Setpriority:</b>

<lidata="Low">Low</li>

<lidata="Medium">Medium</li>

<lidata="High">High</li>

</ul>

<scriptsrc="../lib/firebugx.js"></script>

<scriptsrc="../lib/jquery-1.7.min.js"></script>

<scriptsrc="../lib/jquery-ui-1.8.16.custom.min.js"></script>

<scriptsrc="../lib/jquery.event.drag-2.0.min.js"></script>

<scriptsrc="../slick.core.js"></script>

<scriptsrc="../slick.editors.js"></script>

<scriptsrc="../slick.grid.js"></script>

var grid;

var data = [];

var columns = [

{id: "title", name:"Title", field: "title", width: 200, cssClass: "cell-title",editor: Slick.Editors.Text},

{id: "priority", name:"Priority", field: "priority", width: 80, selectable: false,resizable: false}

];

var options = {

editable: true,

enableAddRow:false,

enableCellNavigation:true,

asyncEditorLoading:false,

rowHeight: 30

};

$(function () {

for (var i = 0; i< 100; i++) {

var d= (data[i] = {});

d["title"] = "Task " + i;

d["priority"] = "Medium";

}

grid = newSlick.Grid("#myGrid", data, columns, options);

grid.onContextMenu.subscribe(function (e) {

e.preventDefault();

varcell = grid.getCellFromEvent(e);

$("#contextMenu")

.data("row", cell.row)

.css("top", e.pageY)

.css("left", e.pageX)

.show();

$("body").one("click", function () {

$("#contextMenu").hide();

});

grid.onClick.subscribe(function (e) {

varcell = grid.getCellFromEvent(e);

if(grid.getColumns()[cell.cell].id == "priority") {

var states = { "Low": "Medium", "Medium":"High", "High": "Low" };

data[cell.row].priority =states[data[cell.row].priority];

grid.updateRow(cell.row);

e.stopPropagation();

}

});

$("#contextMenu").click(function (e){

if(!$(e.target).is("li")) {

return;

}

var row =$(this).data("row");

data[row].priority =$(e.target).attr("data");

grid.updateRow(row);

});

</script>

</body>

</html>