EasyUI DataGrid表格双击获取该行数据—笔记
2016-12-10 16:46
585 查看
绑定双击事件函数
将鼠标双击的这行设为选中状态,将选中行字段值传入p标签中,事件完成后取消选中。
表格自动获取的数据对象,即使没有将数据对象中key值设为表格的字段,也可以获取当前行的这个key对应的value值。
Ajax将获取的值发送给服务端,返回的数据添加到p标签中。
源代码:
$("#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); } });
相关文章推荐
- easyUI数据表格datagrid之笔记
- EasyUI datagrid数据表格--获取datagrid中选中行的数据
- ajax返回的数据 用easyui的datagrid的表格来循环显示,用灰色背景的是隐藏的列。点击可以获取到隐藏的值
- easyUI数据表格datagrid之笔记2
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。
- 通过点击datagrid的某一行的checkbox事件获取该行的其他数据(例如:行号)
- EasyUI datagrid获取一行数据
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题
- Easyui DataGrid 获取单元格数据
- 在js中获取easyui datagrid的数据
- 单击选中GridView 或 HTML 表格的某行,并获取该行的数据。。。。
- easyui获取数据表格中选中行的数据
- easyui datagrid combobox下拉框获取数据问题
- EasyUI-datagrid获取编辑行的数据
- easyui源码翻译1.32--datagrid(数据表格)
- jQuery EasyUI API 中文文档 - DataGrid 数据表格
- jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
- 怎样用JS获取DataGrid中CheckBox是否选中,并且取得该行的DataGrid数据?
- .net mvc3 + easyui datagrid 获取单页数据 无刷新分页