时间戳

首页 > 解决方案 > 如何在syncfuison ejgrid的单击事件中的列上添加功能？

javascript - 如何在syncfuison ejgrid的单击事件中的列上添加功能？

问题描述

我在我的 Angular js 项目中使用同步融合网格，我想在其中放置一个点击事件来触发一个函数。

我已经尝试过此链接中提供的解决方案https://www.syncfusion.com/kb/3767/how-to-place-hyperlink-in-grid-column

我的 HTML 代码片段是

<div id="OverAllOverDueDoc" ej-grid e-datasource="OverAllOverDueDocList"
                 e-allowfiltering="true"  e-allowpaging ="true"
                 e-filtersettings-filterType="excel">
    <div e-columns>
        <div e-column e-field="CompanyName" e-headertext="Company" e-tooltip="Company" e-width="80"></div>
        <div e-column e-field="PlantName" e-headertext="Plant" e-width="80"></div>
        <div e-column e-field="" e-headertext="Candidate Id" e-width="80"></div>
        <div e-column e-field="EmployeeCode" e-headertext="Employee Code" e-width="80"></div>
        <div e-column e-field="BudgetCode" e-headertext="Budget Code" e-width="80"></div>
        <div e-column e-field="EmployeeName" e-headertext="Employee Name" e-width="80"></div>
        <div e-column e-field="EmployeeCategory" e-headertext="Emp Category" e-tooltip="Employee Category" e-width="80"></div>
        <div e-column e-field="Designation" e-headertext="Designation" e-width="80"></div>
        <div e-column e-field="DOJ" e-headertext="DOJ" e-width="80" e-tooltip="Date of Join"></div>
        <div e-column e-field="TotalOverDueMandatory" e-headertext="Mandtatory" e-tooltip="Mandatory Document" e-width="80"></div>
        <div e-column e-field="TotalOverDueOptional" e-headertext="Optional" e-tooltip="Optional Document" e-width="80"></div>

    </div>
</div>

在图片中突出显示的两列每个单元格都可以点击

在此处输入图像描述

标签： javascriptangularjssyncfusion

解决方案

来自 Syncfusion 支持的问候。

查询：我在我的 Angular js 项目中使用同步融合网格，我想在其中放置一个点击事件来触发一个函数。

我们可以使用 ejGrid 的列模板功能来满足您的要求。并使用 ejGrid 的 create 事件绑定超链接列的单击事件。请参考以下代码示例，

<script type="text/x-jsrender" id="columnTemplate">
    <a href="https://www.syncfusion.com">{{:EmployeeID}}</a>
</script>

<script>

    function onGridCreate(args) {
        this.element.find(".e-gridcontent").on("click", "a", function (e) {
            alert("hit"); // do your stuff here.
        });
    }
</script>
  
<div ng-app="employeeView">
    <div ng-controller="GridCtrl">
        <div id="Grid" ej-grid e-datasource="data"
             e-allowfiltering="true" e-allowpaging="true"
             e-filtersettings-filterType="excel" e-create="onGridCreate">
            <div e-columns>
                <div e-column e-field="CustomerID" e-headertext="Company" e-tooltip="Company" e-width="80"></div>
                <div e-column e-field="ShipCity" e-headertext="Plant" e-width="80"></div>
                <div e-column e-headerText="Manage Records" e-template="#columnTemplate"></div>
            </div>
        </div>
    </div>
</div>

输出： 查看输出

如果您需要进一步的帮助，请回复我们。我们很乐意帮助您。

问候，

玛尼万南帕德玛纳班。

推荐阅读