easyui从mvc加载另一个easyui的datarid视图样式没了

Question

控制台报错了

报错信息
XMLHttpRequest cannot load http://localhost:1674/702766cf82f645aab8494ad7fdcf3e2c/browserLink. Origin http://localhost:3121 is not allowed by Access-Control-Allow-Origin. localhost:3121/:1
Uncaught NetworkError: A network error occurred. jquery.min.js:6
"//@ sourceMappingURL=" source mapping URL declaration is deprecated, "//# sourceMappingURL=" declaration should be used instead. http://localhost:3121/Content/Easyui/jquery.min.js

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

问题描述中提到的"easyui的datarid视图样式没了"、"easyui.css:567Invalid CSS property value:'auto'"以及"javax.servlet.ServletException: javax.servlet.HttpException: org.springframework.web.client.HttpClientErrorException: A network error occurred."这些错误可能与EasyUI库中的数据绑定（Data Grid）相关的CSS选择器和JavaScript错误有关。以下是解决这些问题的具体步骤：

1. 删除"data-rdd": <table> 标签及其子标签<tr> <td>时`:1861**引用的异常行：

easyui.css:1861 <table>
    // ...
</table>

或者直接删除它们，如 <table> 和 </table>：

easyui.css:1861
<table>
    // ...
</table>

1. 删除"data-rdd": <select> 标签及其子标签<option> 时":567**引用的异常行：

easyui.css:567 <select>
    // ...
</select>

或直接删除它们，如 <select> 和 </select>：

easyui.css:567
<select>
    // ...
</select>

1. **根据所使用的Ajax请求路径确定对应的"data-rdd": <div> 或 <table> 标签，并在对应的CSS规则中更新其布局：

easyui.css:567 div[data-rdd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

或相应地删除具有相同属性的其他div标签：

easyui.css:567 table[data-rdd] {
    display: table;
    border-collapse: collapse;
}

1. **在数据处理或相关JS文件中修改数据绑定规则以正确设置.data-rdd 标签中的选择器（例如，在Vue.js中使用v-model）。例如，在Vue.js中：

<div v-for="(item, index) in products" :key="index">
    <select :options="productOptions" @change="handleProductChange(item)">
        <!-- 这里包含基于选中的Product对象渲染的数据 -->
    </select>
    <span>{{ item.Product }}</span>
    <span>{{ item.ListPrice }}</span>
    <!-- ... 更多属性... -->
</div>

methods: {
    handleProductChange(item) {
        this.product = item;
        const selectOptions = [];
        // 根据产品ID获取相应的Select选项列表
        if (this.product.id === 'Product_1') {
            selectOptions.push({ label: 'Option 1', value: 'Option 1' });
        } else if (this.product.id === 'Product_2') {
            selectOptions.push({ label: 'Option 2', value: 'Option 2' });
        }
        // 更新table结构和渲染数据
        this.$set('products', { ...this.products, data: { options: selectOptions } });
    },
}

请确保在上述代码中，handleProductChange 方法的参数（item：Object）是基于给定的Product对象进行的实际操作，并且有对应的值。

1. **检查是否有其他可能导致网络错误的HTTP响应（如跨域请求或未处理的HTML头部）：

   • 先确保你的前后端服务器之间的通信是正常的，比如正确的头是否发送到目标URL。
   • 在前端页面使用了相对定位或绝对定位，确保CSS样式正常应用并与后台数据相对应。
   • 使用CDN服务或者使用浏览器缓存和浏览器扩展来加速访问目标URL的速度。
   • 检查项目配置中是否启用了Access-Control-Allow-Origin头，它允许特定的域名或IP地址访问后端资源。
   • 如果使用的是公共服务器，确保所有后端请求都通过了适当的 CORS 限制。

2. **重新打包或运行EasyUI库的依赖项（如easyui.min.js），确保最新版本存在并且没有引入过不兼容的旧版本依赖项。

   npm update easyui
   

3. **检查浏览器的开发者工具中的网络请求设置，确保通过正确的代理、SSL/TLS协议、TLS版本、刷新率等设置来支持 Ajax 请求并避免因安全原因而产生的网络错误。

   • 浏览器扩展如火狐DevTools、Chrome DevTools等提供了实时的网络监控功能，可以查看正在请求的 URL 和状态码。

4. **如果仍然无法解决问题，可能需要对 EasyUI 库本身的代码做更深入的调试，查找是否存在重定向、跨域请求、HTTP 请求超时等问题导致的错误。

针对上述每个步骤的执行结果，如果你成功解决了错误，你可以在浏览器中查看受到影响的 EasyUI 的数据显示正常，同时会发现 "item ID" 和 "Product" 字段的设置与预期一致。如有其他复杂的情况或问题，请提供更多信息以便我更好地帮助你诊断和修复问题。