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

最新推荐文章于 2023-05-16 13:20:08 发布

luffy5459

最新推荐文章于 2023-05-16 13:20:08 发布

阅读量5.6k

点赞数 6

分类专栏： Web前端文章标签： datagrid combobox textbox

本文链接：https://blog.csdn.net/feinifi/article/details/86411670

版权

Web前端专栏收录该内容

87 篇文章 3 订阅

订阅专栏

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;" onclick="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);
}

最终的展示效果：