您的位置:首页 > 产品设计 > UI/UE

EasyUI DataGrid表格双击获取该行数据—笔记

2016-12-10 16:46 585 查看
绑定双击事件函数

$("#queDg").datagrid({
... ...
... ...
onDblClickRow:function(rowIndex){
$("#queDg").datagrid("selectRow",rowIndex);
var currentRow = $("#queDg").datagrid("getSelected");
$("#p p").text("");
$("#p p").text(currentRow.description);
$("#queDg").datagrid("unselectRow", rowIndex);
}
});


将鼠标双击的这行设为选中状态,将选中行字段值传入p标签中,事件完成后取消选中。

表格自动获取的数据对象,即使没有将数据对象中key值设为表格的字段,也可以获取当前行的这个key对应的value值。

Ajax将获取的值发送给服务端,返回的数据添加到p标签中。

var f_id = currentRow.function_id;//function_id没有设为表格字段

$.ajax({
type : "POST",
url : ctx + "/project/getFunctionCode",
dataType:"text",
data : {
"functionId" : f_id
},
success : function(data){
$("#g p").text("");
$("#g p").text(data);
}
});


源代码:

//疑似问题列表
function queDataGrird(projectId){
var param = {"projectId":projectId};
$("#queDg").datagrid({
loadMsg : 'Processing, please wait …',
fitColumns : false,
rownumbers : true,
toolbar : '#queTab',
method : "POST",
url : ctx + "/home/getProblem",
queryParams:param,
columns : [[
{field : 'fname',title : '缺陷函数',width : 150,align : 'center'},
{field : 'type', title : '缺陷类型',width : 150,align : 'center', formatter : function(value, row, index) {
var v = "";switch (value) {
case 1:v = "指针安全";break;
case 2:v = "数组越界";break;
case 3:v = "内存泄漏";break;
case 4:v = "有符号数溢出";break;
case 5:v = "无符号数溢出";break;
case 6:v = "浮点数溢出";break;
case 7:v = "除数为零";break;
case 8:v = "非数值";break;
default:
v = "未知";
}
return v;
}},
{field :'position',title : '位置',width :150,align : 'center'}, {
field : 'description',title : '缺陷描述',width : 950,align : 'left'}, {
field : 'is_confirm',title :'确认为缺陷 <img  src="static/easyui/css/images/u197.png"  style="display:block;float:right;margin-left:10px">',width : 150, align : 'center',
formatter:function(v,r,i){
var img = "";
if(v==-1){
img = '<a href="javascript:void(0);" ><img src="static/easyui/css/images/u201.png" onclick="confirmChange(\''+r.problem_id+'\',\''+r.is_confirm+'\',\''+i+'\');" border=0 width="19" height="19"></a>'
}else{
img = '<a href="javascript:void(0);" ><img src="static/easyui/css/images/u197.png" onclick="confirmChange(\''+r.problem_id+'\',\''+r.is_confirm+'\',\''+i+'\');" border=0 width="19" height="19"></a>'
}
return img;
}
}
]],

//双击显示缺陷详情及缺陷跟踪
onDblClickRow:function(rowIndex){
var _img = $('.tit5 ul li:eq(1)').children('.left-img').children('.box-img');
var _imgUrl = _img.attr('src');
if (_imgUrl.indexOf("check_box.png") < 0) {
_img.attr("src", "static/easyui/css/images/check_box.png"); //修改图片路径
$('#p').panel('open');
$('.lpl').css('z-index','10');
}
var _img1 = $('.tit5 ul li:eq(2)').children('.left-img').children('.box-img');
var _imgUrl1 = _img1.attr('src');
if (_imgUrl1.indexOf("check_box.png") < 0) {
_img1.attr("src", "static/easyui/css/images/check_box.png"); //修改图片路径
$('#g').panel('open');
$('.lpl1').css('z-index','10');
}

$("#queDg").datagrid("selectRow",rowIndex);
var currentRow = $("#queDg").datagrid("getSelected");
$("#p p").text("");
$("#p p").text(currentRow.description);

var f_id = currentRow.function_id;

$.ajax({
type : "POST",
url : ctx + "/project/getFunctionCode",
dataType:"text",
data : {
"functionId" : f_id
},
success : function(data){
$("#g p").text("");
$("#g p").text(data);
}
});

$("#queDg").datagrid("unselectRow", rowIndex);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  datagrid easyui