如何将JS生成的API URL应用到PHP页面的EasyUI数据网格中

解决方案 #

你之前的实现思路走了弯路，不需要把JavaScript生成的URL回传给PHP再渲染页面，EasyUI Datagrid本身支持通过JavaScript动态配置接口地址，直接在前端修改即可，操作步骤如下：

1. 先删除原有PHP代码中表格data-options属性里写死的静态url配置，修改后的表格代码如下：

<table class="easyui-datagrid" id="dgper3" nowrap="false" data-options="
       iconCls: 'icon-edit',
       singleSelect: true,
       required:true,
       method: 'get'
    ">
    <thead>
    <tr>
            <th
                data-options="
                field:'id',
                onDblClick:openWinPermisoLaboralter,
                align:'center'"
                width="5%">Id</th>
            <th
                data-options="
                field:'nombre_completo',
                onDblClick:openWinPermisoLaboralter,
                align:'center'"
                width="30%">Nombre completo</th>
            <th
                data-options="
                field:'estado',
                onDblClick:openWinPermisoLaboralter,
                align:'center'"
                width="8%">Estado</th>
     </tr>
    </thead>
    </table>

2. 在页面底部添加一段JS代码，页面加载完成后调用你已经写好的newdatagrid()方法拿到动态接口地址，再给Datagrid赋值并加载数据：

// 依赖jQuery（EasyUI本身就依赖jQuery，直接用即可）
$(document).ready(function(){
  // 获取动态生成的教师专属接口地址
  const apiUrl = newdatagrid();
  // 给Datagrid配置接口地址并触发加载
  $('#dgper3').datagrid('options').url = apiUrl;
  $('#dgper3').datagrid('reload');
});

你之前的写法会触发页面跳转，自然会出现URL拼接异常的问题，用上述方法完全不需要修改后端PHP逻辑，前端直接处理即可适配不同教师账号的动态数据加载需求。

内容的提问来源于stack exchange，提问作者MARIA ALEJANDRA MEJIA MONTOYA