jQuery EasyUI的DataGrid 数据行上右键菜单，并Check行

最新推荐文章于 2023-08-18 11:12:43 发布

原创最新推荐文章于 2023-08-18 11:12:43 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #右键菜单 #html

html easyui datagrid 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用 DataGrid 实现带右键菜单的功能，包括菜单项的定义及触发方式，并展示了如何通过 JavaScript 控制 DataGrid 的行为，如取消所有选择并仅选中当前点击的行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">

$(function(){

    $('#dg').datagrid({

        title:'DataGrid',

        iconCls:'icon-grid',

        fit:true,

        collapsible:true,

        closable:true,

        nowrap: false,

        animate:true,

        url: '',

        idField:'id',

        pagination: true,

        pageSize:20,

        pageList: [20,30,50],

        onRowContextMenu: onRowContextMenu, //右键

        rownumbers: true,

        singleSelect: true,

        columns:[[

        ]],

        onLoadSuccess: function() {

            delete $(this).datagrid('options').queryParams['id'];

        }

    });

});

//添加右击菜单内容

function onRowContextMenu(e, rowIndex, rowData){

   e.preventDefault();

   var selected=$("#dg").datagrid('getRows'); //获取所有行集合对象

    selected[rowIndex].id; //index为当前右键行的索引，指向当前行对象

    $('#rightMenu').menu('show', {

        left:e.pageX,

        top:e.pageY

    });

 $('#dg').datagrid('unselectAll');

  $('#dg').datagrid('uncheckAll');

  $('#dg').datagrid('checkRow', rowIndex);//该操作为选中当前行的CheckBox

}

</script>

<div id="rightMenu" class="easyui-menu" style="width:120px;">

    <div onClick="view()" data-options="iconCls:'icon-search'">查看</div>

    <div onClick="add()" data-options="iconCls:'icon-add'">新增</div>

    <div onClick="edit()" data-options="iconCls:'icon-edit'">编辑</div>

    <div onClick="del()" data-options="iconCls:'icon-remove'">删除</div>

    <div class="menu-sep"></div>

    <div onClick="print()" data-options="iconCls:'icon-print'">打印</div>

    <div onClick="reload()" data-options="iconCls:'icon-reload'">刷新</div>

</div>