jquery ezUI 双击行记录弹窗查看明细

第一步:给DataGrid绑定onDblClickRow事件;

<table title="" id="dataTable" class="easyui-datagrid" style="height: 500px;" data-options="

 url: '/ajaxget.aspx?_t='+new Date().getTime()+'&_action=SVNGetHandler.GetSearchPageData&searchType=&keyword=*',

 method: 'get', 

 rownumbers: true,

 singleSelect:true,

 border:0, 

 idField: 'Id', 

 columns:[[ 

     {field:'ProjectId',title:'项目Id',width:30,align:'left'},

     {field:'ProjectName',title:'项目名称',width:150,align:'left'},

     {field:'ProjectNum',title:'项目编号',width:100,align:'left'}

 ]],

 toolbar:'#myToolbar', 

 pagination:true,

 fitColumns: true,

 pageSize:20, 

 onDblClickRow:onDblClickRow

 ">

 </table>

第二步:编写行双击事件

//行双击事件

function onDblClickRow() {

var item = $('#dataTable').datagrid("getSelected");

if (item != null) {

editId = item.Id;

var html = "";

html += "项目名称:" + item.ProjectName + "<br/>";

html += "项目编号:" + item.ProjectNum + "<br/>";

html += "<br/>"; 

show(item.ProjectName + " 项目详情", html); 

}

}

第三步:弹出窗口显示详细信息:

<div id="details" style="padding: 10px;line-height:20px;font-size:12px"></div>

function show(title, msg) { 

$('#details').html("<div id=\"output\" style=\"width:99%;height:96%;border:0\">" + msg + "</div>");

$('#details').dialog({

title: title,

width: 800,

height: 400,

iconCls: 'icon-custom-eye',

closed: false,

cache: false,

modal: true

});

}

时间: 2024-08-20 00:45:13

jquery ezUI 双击行记录弹窗查看明细的相关文章

jquery ezUI 双击行记录弹窗查看明细的实现方法_jquery

第一步:给DataGrid绑定onDblClickRow事件: <table title="" id="dataTable" class="easyui-datagrid" style="height: 500px;" data-options=" url: '/ajaxget.aspx?_t='+new Date().getTime()+'&_action=SVNGetHandler.GetSearc

action里面如何传多行记录到 jquery json遍历。

问题描述 sql:id name age 1 滔哥 702 宝哥 68我是通过ajax取多行记录,打算用json格式存储//这是BaseAction里面的定义的jsonpublic String ajaxJson(Map<String, String> jsonMap) {JSONObject jsonObject = SONObject.fromObject(jsonMap);return ajax(jsonObject.toString(), "text/html");

jQuery探测位置的提示弹窗(toolTip box)详细解析_jquery

这里我用jQuery做了个提示弹窗的js,并做了个小demo,简单总结下: 方位 根据当前鼠标所处的位置不同,箭头所指向的方向也不同: 左上方(left-top)(缺省).左下方(left-bottom).右上方(right-top).右下方(right-bottom).上左方(top-left).上右方(top-right).下左方(bottom-left).下右方(bottom-right) 优先级 以上各种情况优先级依次降低 探测思路 探测基本思路是: 首先,也是前提条件,判断容器的高或宽

Jquery easyui开启行编辑模式增删改操作_jquery

jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是功能非常强大. 先给大家展示效果图:

jQuery获取table行数并输出单元格内容的实现方法_jquery

本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").

谁有给每行记录增加一个右键菜单的代码?

问题描述 谁有一个列表中给每行记录增加一个右键菜单的代码?最好是jquery的 谢谢了 解决方案 http://www.cssrain.cn/demo/contextmenu/contextmenu.html这有实例,是jquery的

QQ五笔输入法文本中每行记录遵循的格式是什么

  QQ五笔输入法文本中每行记录遵循的格式如下: [编码]词[ 词][ 词] ... [词n]rn []内的内容为可选项目,编码为个a-y之间的任一字母,多个词之间以空格分隔.如果编码为有效编码,词中间可以包含非汉字,导入词库时,系统会自动将非汉字的符号去除.如果未指定编码或编码无效,则词中不能包含非汉字的字符,否则会自动过滤这条记录.

jQuery实现表格行上移下移和置顶的方法

  本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 6

Jquery easyUI 更新行示例

 这篇文章主要介绍了Jquery easyUI 更新行.更新指定的行,需要的朋友可以参考下 更新指定的行, param 参数包含下列特性:  index:更新行的索引.  row:行的新数据.  代码如下: var grid = $("#QualityAdd").datagrid("updateRow", { index: gridIndex, row: {  Url: "<a href="#">"+r[0].ht