jquery的datagrid的增删改查属性

1 datagrid是jquery的一个table格式的组件。首先需要添加jquery的一些样式和js
如：<link rel="stylesheet" type="text/css" href="./common/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./common/easyui/themes/default/easyui.css">

<script type="text/javascript"  src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./common/easyui/jquery.easyui.min.js"></script>


2 然后设置table的id名。这样就可以设置对应的id为datagrid属性了
如：<table id="sda_prop"></table>


$("#sda_prop").datagrid({
width:400,
height:600,
idField:'id',
rownumbers:true,
columns:[
[
{field:'ck',checkbox:true},
{title:'名称',field:'name',width:150},
{title:'属性值',field:'value',width:250}
]
],
toolbar:[
{text:'添加',handler:function(){
addProp();
}},'-',
{text:'修改',handler:function(){
editProp();
}},'-',
{text:'删除',handler:function(){
delProp();
}},'-',
{text:'查看',handler:function(){
chakan_prop();
}}
]
});


3 然后可以添加属性。通过appendRow可以添加
如：$("#sda_prop").datagrid("appendRow",{
id:id_,
name:name_,
value:text_
})


4 修改属性，通过getSelections来选择。然后updateRow来更新。然后通过refreshRow来刷新即可
如：var rows=$("#sda_prop").datagrid("getSelections");

if(rows.length>0){
if(rows.length>1){
alert("只能选择一条记录，进行修改");
}else{
var row=rows[0];
var index=$("#sda_prop").datagrid("getRowIndex",row);
num=num+1;
row.name="newName"+num;
row.value="newValue"+num;
$("#sda_prop").datagrid("updateRow",row);
$("#sda_prop").datagrid("refreshRow",index);
}
}else{
alert("请选择要修改的记录");
}


5 删除属性，通过循环来删除。通过deleteRow来删除。通过索引来
如：var flag=window.confirm("确定删除所选记录吗");
if(flag){
var rows=$("#sda_prop").datagrid("getSelections");
if(rows.length==0){
alert("请选择要删除的记录");
}else{
delProp_ing(rows[0]);
}
}


function delProp_ing(row){
var index_=$("#sda_prop").datagrid("getRowIndex",row);
$("#sda_prop").datagrid("deleteRow",index_);

var rows=$("#sda_prop").datagrid("getSelections");
if(rows.length>0){
delProp_ing(rows[0]);
}else{
return ;
}
}


6 查看属性。可以通过getSelections来得到。然后通过属性名可以得到属性值。
如：var rows=$("#sda_prop").datagrid("getSelections");
alert(rows[0].id);//这样就可以得到属性值了。