easyui-treegrid中做下拉框加载后台数据

最新推荐文章于 2023-09-15 17:39:57 发布

Wing_gor

最新推荐文章于 2023-09-15 17:39:57 发布

阅读量1.1k

点赞数

文章标签： easyui treegrid

本文链接：https://blog.csdn.net/qq_40085888/article/details/84623162

版权

在easyui的treegrid中，如何将某一列设置为可编辑的下拉框，并在选择后更新对应行的数据。通过formatter方法格式化列，但由于treegrid的限制，无法直接在formatter内定义组件。解决方案是在外部定义combobox，并在treegrid的onLoadSuccess事件中执行，确保在树结构加载完成后加载下拉框数据。在onchange事件中，可以通过formatter将row参数作为input属性，以便获取所需数据。此外，若多个combobox共享相同数据，可在页面加载完成后异步请求数据，存储在变量中，定义combobox时使用。

摘要由CSDN通过智能技术生成

需要是在treegrid树结构中, 每一行的某一列做成可编辑的下拉框, 选择了则直接更新该行数据的对应字段.

效果如:

这种就需要借助 formatter 来格式化这一列.

function myFormatter(value, row, index) {
    if(row){
        return '<input style="width:190px" class="easyui-combobox" '
        + 'name="testName" data-option="valueField:\'id\',textField:\'unitName\',url:\'test/getComboboxData.do\'"/>'
    }
    return '';
}

但是这样会发现无法让该列做成下拉框. 因为在 treegrid 和 datagrid中, 是不能在formatter中定义easyui组件的.需要在外面进行定义.

我们可以对 formatter的 <input>标签中增加一个样式 class. 然后获取该样式,在外面进行定义combobox

注意, 这个操作应该在 treegrid 加载完成后做,而不是在 $(function(){}) 页面加载完成后做. 故应在 treegrid 的 onLoadSuccess 事件中进行.