EasyUI--datagrid中编辑器(editor)的类型为combobox的值得绑定

最新推荐文章于 2025-06-28 12:31:46 发布

孟夏草木长

最新推荐文章于 2025-06-28 12:31:46 发布

阅读量3.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jQuery Easy UI 文章标签： EasyUI datagrid

本文链接：https://blog.youkuaiyun.com/muyeju/article/details/48002213

jQuery Easy UI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在EasyUI的datagrid中使用combobox编辑器进行值绑定，包括固定值的绑定和从远程获取数据后绑定到combobox的实现方法。

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

1.绑定固定的值

<span style="font-family:Microsoft YaHei;"> $(function () {
        	/**管道级别*/
        	var pipingLevel = [{"value":"1","text":"A级"},{"value":"2","text":"B级"},{"value":"3","text":"C级"}];//json格式
        	function levelformmat(value){
        		if(value==0){
        			return ;
        		}
        		for(var i =0;i<pipingLevel.length;i++){
        			if(pipingLevel[i].value==value){
        				return pipingLevel[i].text;
        			}
        		}
        	}
        	 $("#datagrid").datagrid({
                singleSelect: true,
                fitColumns: false,
                border: false,
                columns: [[
                    {field: 'number', title: '编号', width: 66, editor: "text"},
                    {field: 'pipingNo', title: '管道编号', width: 90, editor: "text"},
                    {field: 'pipingName', title: '管道名称(登记单元)', width: 170, editor: "text"},
                    {field: 'pipingLevel', title: '管道级别', width: 100, editor:{
                    	 type: '<strong>combobox</strong>',
                         options: {
                            data: pipingLevel,
                            valueField: "value",
                            textField: "text",
                            editable: false,
                            panelHeight:70,
                            required: true
                        }
                     }},
                ]],
</span>
});

2.从远程获取数据，然后绑定到combobox中

<span style="font-family:Microsoft YaHei;"> columns: [[
          {field: 'number', title: '编号', width: 100, editor:'text'},
          {field: 'pipingNo', title: '管道编号', width: 100, editor: "text"},
          {field: 'pipingName', title: '管道名称(登记单元)', width: 300, editor: "text"},
          }},  
          field: 'DesignUnit', title: '设计单位', width: 300,editor:{
                type:'combobox',
                options:{
                url: 'pressurePipingUnit/unit2',<span style="white-space:pre">		</span>//重远程加载数据
		panelHeight: '200',
		valueField:'unitId',<span style="white-space:pre">		</span>//保存到数据库的值
		textField:'unitName',<span style="white-space:pre">	</span>//绑定到下拉列表框中显示的值
                    	}
                    }},
]],</span>