前言:
這網站詳細寫著PQGrid應用，但是他html,JavaScript,Css分開寫...如果想要立即顯示結果就要花一點時間實作
因此我把它全部融合在一個html...而且裡面checkbox還是要自己找連結，這裡已處理。此外這範例我有連結到
自己架設的伺服器，紅色url需自行更換。
<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="../PQGrid/pqgrid.min.css" />
<script src="../PQGrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="../PQGrid/office/pqgrid.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
.ui-menu {
width: 150px;
}
.ui-menu * {
font-family: Tahoma;
font-size: 11px;
vertical-align: middle;
}
.ui-menu li img {
margin: 0px;
padding: 0px;
vertical-align: middle;
border: none;
}
.pq-sh-checkbox {
display: inline-block;
height: 13px;
width: 13px;
margin: 3px;
vertical-align: middle;
/*border:1px solid blue;*/
background: url(http://paramquery.com/Content/images/checkbox-sprite.png);
}
.pq-sh-checkbox-checked {
background-position: 13px 0px;
}
</style>
<div id="grid_showhide_columns" style="float:left;margin:0 10px;" >
</div >
<ul style="list-style-type:none;float:left;" class="menu_cols" >
</ul >
<div style="clear:left;" > </div >
<script >
$(function () {
var MYcolM = [
{ title: "Id", width: 100, dataType: "string", dataIndx: 0},
{ title: "Tital", width: 200, dataType: "string", dataIndx: 1 }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "http://",
//url: "/pro/invoice.php",//for PHP
getData: function (dataJSON) {
var data = dataJSON;
return { data: data };
}
};
var CM = MYcolM;
CM[0].width = 150;
var newObj = {
width: 600,
height: 350,
title: "Companies listed on the <b>NASDAQ</b>",
resizable: true,
selectionModel: { type: 'cell', mode: 'block' },
scrollModel: { autoFit: true },
editModel: { clicksToEdit: 2 },
dataModel: dataModel,
colModel: CM
};
var $grid = $("#grid_showhide_columns").pqGrid(newObj);
//menu with checkbox images.
$.each(newObj.colModel, function (i, col) {
var cls = 'pq-sh-checkbox pq-sh-checkbox-checked';
if (col.hidden) {
cls = 'pq-sh-checkbox';
}
$(".menu_cols").append("<li><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
});
$(".menu_cols").menu({
select: function (evt, ui) {
var indx = $(ui.item).index();
var colM = $grid.pqGrid("option", "colModel");
if (colM[indx].hidden == true) {
colM[indx].hidden = false;
$(ui.item).find("span").addClass("pq-sh-checkbox-checked");
}
else {
colM[indx].hidden = true;
$(ui.item).find("span").removeClass("pq-sh-checkbox-checked");
}
$grid.pqGrid("option", "colModel", colM);
evt.preventDefault();
}
});
});
</script >
</body >
</html >
參考資料:
留言列表
美食 (2)
