<html>
<head>
<meta charset="UTF-8">
<title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Context Menu on DataGrid</h2>
<p>Right click on the header of DataGrid to display context menu.</p>
<div style="margin:20px 0"></div>
<table id="dg"></table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url: 'datagrid_data1.json',
method: 'get',
title: 'Context Menu on DataGrid',
iconCls: 'icon-save',
width: 700,
height: 250,
fitColumns: true,
singleSelect: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:250},
{field:'status',title:'Status',width:60,align:'center'}
]],
toolbar:[{
iconCls: 'icon-add',
handler:function(){
for(var i=0i<5i++){
$('#dg').datagrid('appendRow',{
itemid: '',
productid: '',
listprice: '',
unitcost:'',
attr1:'',
status:''
})
}
}
}]
})
})
</script>
</body>
</html>
<table id="table_sitelinklist"></table><script type="text/javascript">
var tb = $("#table_sitelinklist")
tb.datagrid({
url: '/Manage/SiteLinkList/',
border:false,
fit: true,
//singleSelect:true,
pagination: true,
pagePosition:'top',
nowrap: true,
striped: true,
pageList: [5,10, 15, 20, 25],
pageSize: 20,
pageNumber:@(ViewBag.page),
idField:"ID",
//queryParams: { status: _status },
columns: [[
{ checkbox: true },
{ field: 'ID', hidden: true},
{ field: 'Name', title: '链接站点名称', width: 200, sortable: true,
formatter: function (value, rec) {
return "<a href='javascript:void(0)' title='点击编辑此链接信息' class='_sitelink_" + rec.ID + "'>" + value + "</a>"
}
},
{ field: 'URL', title: '链接地址', width: 340, sortable: true },
{ field: 'Type', title: '分类', width: 120, sortable: true },
{ field: 'SName', title: '简称', width: 120, sortable: true },
{ field: 'ShowOrder', title: '显示顺序', width: 120, sortable: true }
]],
onLoadSuccess: function () { AddEditable("sitelink","/Manage/SiteLinkEdit/") }
})
var btns=[
{ iconCls: 'icon-edit',text: '添加', handler: function () { AddNewObject("添加新链接","/Manage/SiteLinkEdit/?operation=1")} },
{ iconCls: 'icon-myrealdel',text: '删除', handler: function () { SendModifyRequest("del","删除","table_sitelinklist","/Manage/SiteLinkListModify") } }
]
tb.datagrid('getPager').pagination({buttons:btns})
</script>
给个示例代码给你吧。
说明一下，这个示例代码中，可以通过点击某一行的链接名称进行编辑，每一行的前面有选择框，可以选择多个。将分页工具栏放到了表格顶端，并添加了两个按钮(添加、删除)，删除功能支持批量 *** 作。AddEditable、AddNewObject、SendModifyRequest是自定义的js function，这里并没有附上。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）