首页 新闻 赞助 找找看

请问 EasyUi Datagrid 中怎样动态的改变 editor的Type

0
悬赏园豆:40 [待解决问题]

要求是这样的,我要做一个问卷系统,要根据数据库的值进行当前列eidtor的动态变更,如数据库的值为多选则editor的type为combobox且要为combobox赋值如果是文本且值为字符串类型则type为text如果数字类型则type为numberbox;自己想了好久不知怎么解决,刚接触Easyui不久, 求各位大神帮忙顶顶呀.

ChinaKingKong的主页 ChinaKingKong | 初学一级 | 园豆:147
提问于:2013-12-16 14:30
< >
分享
所有回答(1)
0

你这里所说的当前列是指的datagrid中的一列么?如果是datagrid中的一列的话是不是可以一次性把多选类型、文本类型、和数字类型都定义出来,然后根据条件设定hidden为true或false即可...

当然,页面中也是可以用jsp或php(取决于你的开发语言)等去做if...else判断的,毕竟js只是前端脚本...

流浪的小骆驼 | 园豆:202 (菜鸟二级) | 2013-12-18 10:58

这不是整个一列;每行的列类型都可能不同的,所以用隐藏 解决不了

支持(0) 反对(0) ChinaKingKong | 园豆:147 (初学一级) | 2013-12-18 11:10

@湖南金刚: 使用formatter函数:以下是我写的实现,需要根据你的实际情况做相应调整。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>    
    <table id="dg"></table>
 
    <script type="text/javascript" >
        $('#dg').datagrid({
            url:'datagrid_data1.json',
            columns:[[
                {field:'productid',title:'产品',width:100},
                {field:'type',title:'可编辑区域',width:200,
                formatter: function(value,row,index){
                        if (row.type == "checkbox"){
                            return '<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option></select>';
                        } else if (row.type == "text"){
                            return value;
                        }else if(row.type == "number"){
                            return '<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">';
                        }else{
                            return "ERROR";
                        }
                    }
                }
            ]]
        });
    </script>
</body>
</html>

以下是该实例所用到的数据,datagrid_data1.json:

{"total":3,"rows":[
    {"productid":"彩电","type":"checkbox"},
    {"productid":"冰箱","type":"text"},
    {"productid":"洗衣机","type":"number"}
]}
支持(0) 反对(0) 流浪的小骆驼 | 园豆:202 (菜鸟二级) | 2013-12-18 12:52

@流浪的小骆驼: datebox 怎么不起作用

支持(0) 反对(0) 梦里故乡 | 园豆:36 (初学一级) | 2016-09-10 01:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册