jquery-easyui combobox combogrid 级联不可编辑实例

最新推荐文章于 2024-06-26 16:06:16 发布

转载最新推荐文章于 2024-06-26 16:06:16 发布 · 359 阅读

文章标签：

#ui #javascript #php #ViewUI

本文介绍如何使用editable属性使jQuery EasyUI的ComboBox组件变得不可编辑，并通过Combogrid实现级联加载数据。提供了前端JavaScript代码示例及ThinkPHP后端实现。

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

jquery-easyui combobox combogrid 级联不可编辑实例

如何让jquery-easyui的combobox像select那样不可编辑?
为combobox添加editable属性设置为false
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries"+"?goods_brand_id="+goodsbrand,
valueField:'goods_series',
textField:'goods_series',
editable:false
});
获取值：
'goods_series':$("#goods_series").combobox("getValue"),
表单：
<input class="easyui-combobox" type="text" id="goods_series" style="border:solid 1px #95b8e7;width:120px;height:23px;" />

通过combogrid 选择级联的方式加载内容：
function goodsbrandSelect(){
var goodsbrand = -1;
var brandgrid = $('#goodsbrand').combogrid('grid').datagrid('getSelected');
if (brandgrid != null) {
goodsbrand = brandgrid.goods_brand_id;
}
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries"+"?goods_brand_id="+goodsbrand,
valueField:'goods_series',
textField:'goods_series',
editable:false
});
}

后台thinkphp代码：
public function getBrandsGoodsSeries(){
$goods_brand_id = I('get.goods_brand_id', -1);
$result = array();
$goods = M('goods')->field('goods_id, goods_series')
->where(array('goods_brand_id'=>$goods_brand_id))->where("goods_series is not null")
->group("goods_series")->select();

if (!empty($goods)){
$result = $goods;
}
echo json_encode($result);
}