jQuery easyui --datagrid内部嵌入dropdown

1. Easy UI参考:

Easyui官网帮助的URL:http://jeasyui.com/

在其中找到datagrid查看具体的帮助就可了。

2. JQuery easyui开发体会:最近开发了一个项目用的jquery easyui的框架,发现这个框架还不错,不是很复杂的开发,基本能满足要求,主要是免费的,帮助文档也还算完善,就是目前找不到源码,低版本的1.2.4我找到过源码,有的时候需要修改源码的话有点限制了,还有就是使用帮助的时候,有的属性或者方法提供的不是很全,但是比如layout继承panel,很多属性和方法就需要去panel里面去找了。

3.Datagrid添加dropdown功能介绍

今天主要讲一下easyui的datagrid控件,实际上结合了自己开发的脚本,目前这个控件还无法实现如上图的效果。

上图的easyui datagrid本身提供的功能有:展开/收缩,多行的checkbox选择

自己写js新增的功能:红色的删除图标,dropdown

3.1 找到需要添加dropdown的元素

var cell = $(‘tr[datagrid-row-index=‘ + index + ‘]‘).children(‘[field=location_detail]‘);

location_detail是列名,index参数是行号

3.2 具体添加的代码

<span style="font-size:18px;">var tr = null;
		if (isShelf)
		{
			cell.empty();
			var table = $('<table cellspacing=0 cellpadding=0></table>');
			cell.append(table);

			tr = $('<tr></tr>');
			table.append(tr);
		}
		else
		{
			tr = cell.children('table').find('tr');
		}
		var td = $("<td><div id='" + cbID + "' /></td>");
		tr.append(td);

		$('#' + cbID).combobox({
			panelMaxHeight: 250,
			valueField: 'code',
			textField: 'description',
			width: 85,
			data: json,
			onSelect: function (record)
			{
				var room_id = cbID.split('_')[0];
				var level = parseInt(cbID.split('_')[1]);
				var nextLevel = level + 1;
				var rowIndex = parseInt(cbID.split('_')[2]);
				var childJson = getStorageList(_levelJson, room_id, nextLevel);
				if (childJson.length > 0)
				{
					var nextID = room_id + '_' + nextLevel.toString() + '_' + rowIndex.toString();
					addCombobox(cell, childJson, nextID, false);
				}
				//The combobox will change if update storage_name
			}
		});</span>
时间: 2024-10-31 02:23:55

jQuery easyui --datagrid内部嵌入dropdown的相关文章

[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析

 大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中

jquery easyui datagrid 排序列

点击排序列,将获取参数有:page=1&rows=10&sort=UserName&order=desc c#后台获取sort跟order参数 string sortColumn = Request.Params["sort"].ToString(); string order = Request.Params["order"].ToString(); jquery easyui datagrid 排序列,布布扣,bubuko.com

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru

jquery easyui datagrid设置行样式 不可删除某行

rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSuccess:function(data){ var rows = data.rows; for (var j = 0; j < rows.length; j++) { if (parseInt(rows[j]["ksrs"]) > 0) { $(".datagrid-

JQuery easyUi datagrid 中 editor 动态设置最大值最小值

前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagrid 可编辑行的editor属性具有 min 和 max 属性,设置可以输入的最大值和最小值,但是这个是固定的,如下: [html] view plain copy {field:'workRate',title:'<%/*填报*/%><bean:message key="task.wo

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 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 3

jQuery EasyUI Datagrid性能优化专题

jQuery EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能 都望而却步了.本博客以后会带着分析Datagrid组件的性能问题,并且给出优化方案,也希望大家能集思广益,给出一些好的想法. 慢在哪些方面 以目前对Datagrid的了解程度去看待性能问题,主要有以下几点: 加载大数据量时比较慢(不考虑服务端返回数据的时间),这点尤其体现在IE浏览器里面: 大数据量时,加载后,操作很不流畅,勾选慢,sing

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co

jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为用户的SQL是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小. 经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节