easyui中datagrid列表里面带有textbox和combobox的示例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/feinifi/article/details/86411670

datagrid在默认情况下,我们只是用来展示数据,大多数情况下是和分页结合使用,但是偶尔的一些特殊需求,他要展示一个form表单的一些列表项,而且还可以在列表中进行修改,最终提交表单的时候,我们在列表里面的文本框或者下拉框中做的修改,能够体现在form表单中,我们知道,datagrid的columns属性,提供了如{field:"action",formatter:actions}的形式,可以直接对列表某一列做一个改变的格式化方法,我们可以给列表增加操作列,对列表数据中的日期做格式化,布尔类型的状态做文字“是|否”映射,等等,但是,如果需要对一个值做下拉框的映射,formatter就不好使了,这个时候,我们需要使用上editor这个属性,editor属性,同样也可以让列格式化,而且是格式化为一个组件textbox,combobox等等。

editor使用的格式如下:

editor:{

     type:"combobox",

     options:{textField:"text",valueField:"value",data:json,panelHeight:'auto'}

}

从直观上看,和直接在页面上写上<input type="text" class="easyui-combobox" data-options="textField:'text',valueField:'value',

panelHeight:'auto'"/>类似。

这种对field做映射的方法,当我们初始化datagrid之后,而且加载了数据,效果和没有做格式化差不多,这里要让,格式化生效,还需要注意一个步骤,那就是调用datagrid("beginEdit",index)这个方法,让页面重新渲染成我们预期的结果。下拉框的展示下拉框,文本框的展示文本框。

直接上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>datagrid+combobox+textbox</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="table">
        <table id="datagrid" class="easyui-datagrid" title="列表中带文本框下拉框" 
          style="width:700px;max-height: 422px;" 
          data-options="fitColumns:true,scrollBarSize:0">
        </table>
        <div style="margin-top:20px;">
            <a class="easyui-linkbutton c8" style="width:80px;" οnclick="save()">save</a>
        </div>
    </div>
    <script>
        $(function () {
            var json = [{text:"F",value:"1"},{text:"M",value:"2"}];
            var dg = $("#datagrid").datagrid({
                columns:[[
                    {field:"id",width:80,title:"ID",align:"center"},
                    {field:"name",width:80,title:'姓名',align:"center",editor:{
                        type:"textbox"
                    }},
                    {field:"age",width:80,title:"年龄",align:"center"},
                    {field:"gender",width:80,title:"性别",align:"center",editor:{
                        type:"combobox",
                        options:{
                            data:json,
                            textField:"text",
                            valueField:"value",
                            panelHeight:"auto"
                        }
                    }}
                ]],
                data:[{id:101,name:"aaa",age:30,gender:"1"},
                    {id:102,name:"bbb",age:31,gender:'2'},
                    {id:103,name:"ccc",age:32,gender:"2"}],
                onLoadSuccess:function (data) {
                    for(var i=0;i<data.total;i++){
                        $(this).datagrid("beginEdit",i);
                    }
                }
            });

        })
        function save(){
            var data = $("#datagrid").datagrid("getRows");
            for(var i=0;i<data.length;i++){
                var ele = $("#datagrid").datagrid("getEditor",{index:i,field:"name"});
                data[i]["name"] = $(ele.target).val();
                var ele2 = $("#datagrid").datagrid("getEditor",{index:i,field:"gender"});
                data[i]["gender"] = $(ele2.target).val();
            }
            console.info(data);
        }
    </script>
</body>
</html>

最终的展示效果如下所示: 

这里需要注意一点的就是,列表项中带有下拉框和文本框的,最终,我们获取列表数据时调用datagrid("getData")获取到的值是列表最初加载的时候的数据,如果在提交表单之前,我们对列表的相关数据项做了更改,那么这时候,我们希望得到的数据是更改之后的数据。所以datagrid("getData") 方法在这里失效了。

当然,为了解决这个问题,我们可以通过如下的方法,获取某一列的修改后的真实值。

var ele = $("#datagrid").datagrid("getEditor",{field:'name',index:i});

var value = $(ele.target).val();

如下图所示,当我们对101,102的姓名和101的性别做了更改,最终,我们希望得到如列表中展示一样的结果,我们通过我们的解决办法,正确获取了datagrid中的真实值。查看控制台,我们得到的结果符合我们的预期。

另外,这个表格其实可以做的更加的完美,表头增加一个增加列的工具按钮,每一行的行尾增加一个删除的按钮。 

增加一栏,我们需要注意,增加的内容,不能是一个空的对象,否则最后获取值的时候,也获取不到,属性是空的。可以增加一行这样的数据。让他填充表格的一行,然后,我们可以通过修改的方式,让他改变属性值。

function addRow(){
       var index = $("#datagrid").datagrid("getData").total;
       $("#datagrid").datagrid("appendRow",{id:104,name:"ddd",age:20,gender:"1"});
       $("#datagrid").datagrid("beginEdit",index);
}

删除一行的时候,我们可以借助在格式化时传入的index,那么,删除之后,index就会发生改变,所以,我们还需要重新加载表格数据,让index改变。

function deleteRow(index){
       $("#datagrid").datagrid("deleteRow",index);
       var data = $("#datagrid").datagrid("getData");
       $("#datagrid").datagrid("loadData",data);
}

最终的展示效果:

展开阅读全文

没有更多推荐了,返回首页