求jquery easyui datagrid绑定数据的示例，不要在表格中定义，要那种在JS中定义的
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#tt').datagrid({
url: 'datagrid_data2.json',
title: 'DataGrid - ContextMenu',
width: 600,
height: 300,
fitColumns: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:150},
{field:'status',title:'Status',width:60,align:'center'}
]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!$('#tmenu').length){
createColumnMenu();
}
$('#tmenu').menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
function createColumnMenu(){
var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
var fields = $('#tt').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
}
tmenu.menu({
onClick: function(item){
if (item.iconCls=='icon-ok'){
$('#tt').datagrid('hideColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#tt').datagrid('showColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
}
</script>
</head>
<body>
<h1>DataGrid - ContextMenu</h1>
<p>Right click the header of datagrid to show context menu.</p>
<table id="tt"></table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#tt').datagrid({
url: 'datagrid_data2.json',
title: 'DataGrid - ContextMenu',
width: 600,
height: 300,
fitColumns: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:100},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:150},
{field:'status',title:'Status',width:60,align:'center'}
]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!$('#tmenu').length){
createColumnMenu();
}
$('#tmenu').menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
function createColumnMenu(){
var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
var fields = $('#tt').datagrid('getColumnFields');
for(var i=0; i<fields.length; i++){
$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
}
tmenu.menu({
onClick: function(item){
if (item.iconCls=='icon-ok'){
$('#tt').datagrid('hideColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#tt').datagrid('showColumn', item.text);
tmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
}
</script>
</head>
<body>
<h1>DataGrid - ContextMenu</h1>
<p>Right click the header of datagrid to show context menu.</p>
<table id="tt"></table>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
