easyui-datagrid删除行，添加行

这里我遇到的问题是怎么点击分配按钮把左边表单中选中的内容删除，并且在右边的表单中添加选中的那些内容。

经过查阅百度及easyui的官方文档，我解决用到了下面的几个datagrid中的方法：

用到的方法：

getSelections ：返回所有选中的行，当没有选中的记录时，将返回空数组。

getRowIndex ：返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。

deleteRow ：删除一行。

insertRow ：插入一个新行， param 参数包括下列属性：
index：插入进去的行的索引，如果没有定义，就追加该新行。
row：行的数据。

代码实例：

$('#dg').datagrid('insertRow',{
     index : 0,
     row : {
         name : 'new name'
     }
})

具体的解决方案：

点击分配按钮：

解决思路：按照需求看，应该先把左边选中的内容删除掉，然后在右边的表单中加载出来。想删除选中的内容，就应该先得到选中的行的数据（getSelections），数据是存在表单中的行里面的，所以还要得到选中行的数据的行的索引（getRowIndex），当拿到行的索引后，就可以把左边选中的行根据行的索引删除掉了（deletRow）,实现删除行以后，需要在右边的表单中把删除的行的数据加载出来即插入行。（insertRow）.

具体的代码实现：

$(‘#withdrawBtn’).click(function(){
    var rows = $(‘#greenhouseEquipment’).datagrid('getSelections');//这里是用getSelections获取到选中的行的数据。
    var Ele = []//新建一个空的数组
    for(i=0;i<rows.length;i++){//循环，把行的数组拆分。
          Ele.push(rows[i]);//把拆分好的数据用push的方法保存到数组Ele中。
    }
    for(j=0;j<Ele.length;j++){
          var index = $(‘#greenhouseEquipment’).datagrid('getRowIndex',Ele[j])//循环Ele里面的数据，根据几条数据（几行）获取到对应数量的索引。
           $(‘#greenhouseEquipment’).datagrid('deleteRow',index)//根据索引删除对应的行。
            $(‘#inventoryEquipment’).datagrid('insertRow',{//在右边插入新行。
                  index : 0,
                  row : {
                     name : Ele[j].name
                  }
             })
    }
});

每个操作获得的内容截图：

用getSelections获取选中的行用console.log()输出rows

现在rows里面保存的是一个数组。

for循环后，Ele里面的数据，用console.log()输出Ele

Ele就是保存的rows选中的数据。

for循环Ele，获取行的索引，输出index

得到了选中的行的索引，然后可以根据行的索引进行删除行。

在右边插入新行，没想好怎么帖图，口述一下把。插入新行的书写就是规定的书写方式，不同的只是row里面的数据，我这里表单只有一个字段name，所以，这里值把Ele里面保存的name拿出来，赋值给name就可以了，Ele里面有多少个值，表单就会添加对应的行。输出Ele[j].name.

相反，点击撤回把右边的内容删除，左边添加也是同样的道理，只不过把删除行和添加行当换位置。

这里还有一个保存事件，点击保存的时候，传递右边的ID

现在需要用到一个datagrid的方法：getRows。获取到这个表单所有的行的数据。for循环遍历一下，然后拿到相应的id

代码：

var rowsData = $("#greenhouseEquipment").datagrid("getRows");
    var id = [];
    for(i=0;i<rowsData.length;i++){
		id.push(rowsData[i].name);
    }
    console.log(id);

输出id,得到的值：

这样就顺利的拿到了id，我这里因为是测试，本地搞的后台还没有传id给我，所以先用name代替。

easyui-datagrid删除行，添加行

猜你喜欢