第4页_热门博文_Web前端开发框架_Web前端开发

easyui datagrid联动左右移动示例

2016-1-28评论(0)浏览(1018)分类：easyui开发技巧

　　easyui datagrid左右移动示例，datagrid左右2边记录移动示例。　　示例居于demo\datagrid\basic.html修改，相关数据文件就不贴出来了。 div style=float:left;margin-right:20px table class=easyui-datagrid title=easyui datagrid联动左右移动示例 style=width:330px;height:250px data-options=url:'datagri..

easyui datagrid field配置一样formatter无效解决办法

2016-10-18评论(0)浏览(990)分类：easyui开发技巧

　　easyui datagrid的columns配置，如果存在2个field一样的配置，并且配置了不同的formatter返回不同内容，当生成datagrid内容时，datagrid获取列formatter返回内容只会生成一个field配置的formatter返回的内容，示例如下!DOCTYPE htmlhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8titleeasyui datagrid field配置一..

jqGrid datatype配置为function

2013-7-1评论(0)浏览(968)分类：jqGrid中文API

jqGrid datatype配置为function　　设置为function实际并不是定义数据类型，而是如何处理从服务器返回的数据（可能未xml或者json）。配置的方法需要（或者可以）调用addXMLData, addJSONData或者addRowData方法当接收到数据时。如果需要分页，可以在此调用 jqGrid实例名称setGridParam({lastpage: your_number}) 定义页数。　　示例datatype : ..

jquery-easyui-1.3.1向配置了detailview的datagrid无法添加数据行

2012-11-12评论(1)浏览(968)分类：easyui开发技巧

　　最新版本的jquery-easyui-1.3.1新增了grid插件的subGrid【detailview】功能，可以预览数据行的详细信息。但是使用从他们官网下载的源代码压缩包中使用高版本的jquery，如jquery-1.8.0.min.js时，发现向配置了detailview的grid添加数据行时，如果这个grid没有数据，在添加多行数据时，只能添加在最前面的一行，其他数据无法添加进去。如果gri..

Ext formpanel loadRecord/load方法示例

2015-4-9评论(0)浏览(940)分类：extjs开发技巧

　　Ext formpanel loadRecord/load方法给formpanel加载数据示例　　Ext formpanel loadRecord是加载本地数据用的，注意参数一定要是Ext.data.Record（3-版本）或者Ext.data.Model（4+版本）实例对象，不能直接加载JSON对象。　　Ext formpanel load是加载远程数据用的，返回的数据格式如下，success为ture表示请求成功，数据放到data键名称下注..

extjs actioncolumn依据数据显示隐藏操作按钮

2016-11-14评论(0)浏览(923)分类：extjs开发技巧

　　extjs actioncolumn如何依据当前数据行的某些值来实现隐藏actioncolumn的items中的icon图标。　　配置extjs actioncolumn的items项中的getClass可以实现给icon添加特殊样式，然后此特殊样式设置display:none实现icon的隐藏。　　actioncolumn items项目配置说明，http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.ActionColumn-cfg-item..

easyui tree支持扁平、简单数据结构扩展

2015-6-1评论(0)浏览(919)分类：easyui开发技巧

　　easyui的tree组件支持的数据结构是嵌套模型的，如下[{id:1,text:text1,children:[{id:4,text:text1_1,pid:1}]},{id:2,text:text2},{id:3,text:text3}]　　如果easyui tree想加载类型ztree的简单数据结构（扁平数据结构，依据parentId来确定父子关系的数据结构），需要自己扩展loadFilter来将简单/扁平数据结构处理为嵌套格式的数据才行。　　..

Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody，expandbody事件解决办法

2014-7-5评论(0)浏览(913)分类：extjs开发技巧

　　Ext4.2+ Ext.grid.plugin.RowExpander存在bug，添加的collapsebody，expandbody无法触发，查看了下 Ext.grid.plugin.RowExpander对应的源代码，没有添加collapsebody，expandbody事件，即使按照网上的方法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody，expandbody事件。解决办法：给grid对象添加collapse..

Ext4 Ext.grid.Panel列自适应宽度

2013-7-16评论(0)浏览(893)分类：extjs开发技巧

　　功能描述：根据传入的store数据源中每列内容的最大长度，自动调整Ext.grid.Panel列宽度，使每列的内容显示完全，不被隐藏起来。　　实现方法：用一个absolute定位的容器来计算store数据源中每列的长度，取最大值作为此列的width配置。　　Ext版本号为：4.1.1a　　未设置Ext.grid.Panel列的宽度效果如下，默认宽度为１００px　　通过计算每列..

Ext Grouping Grid分组添加分页

2014-10-10评论(0)浏览(878)分类：extjs开发技巧

　　Ext Grouping Grid增加分页效果，和普通的Ext Grid分页一样，增加PagingToolbar即可，然后依据PagingToolbar发送的分页参数page，返回需要的数据就行，配置分组后会自动分组返回的数据。　　Ext Grouping Grid增加分页源代码如下groupgrid-paging.htmlhtmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / titl..

Ext4 Ext.data.proxy.Direct directFn示例

2013-9-10评论(0)浏览(877)分类：extjs开发技巧

　　Ext4中proxty为Ext.data.proxy.Direct示例代码，注意ext4.0和ext4.1+的区别，ext4.1+需要配置directCfg/method的getArgs方法，ext4.0不需要。　　示例代码，store使用Ext.data.proxy.Direct提供的数据源，然后gridpanel显示数据，ext4.0 directFn示例代码来源于：http://jsfiddle.net/molecule/XhvYe//molecule/XhvYe/，自己参考源代码后增加..

easyui tree获取节点所在层次

2016-3-2评论(0)浏览(855)分类：easyui开发技巧

　　easyui tree获取点击节点所在层次，easyui tree如何获取某个节点所在树层次源代码。easyui的节点没有存储所在层次，所有急需要循环调用getParent方法获取父节点进行层次累加操作计算， titleeasyui tree获取点击节点所在层次/title script type=text/javascript function getLevel(node) {//获取节点所在easyui tree树的层次，..

easyUI tree自定义展开，收缩图标

2017-6-8评论(0)浏览(840)分类：easyui开发技巧

　　easyUI tree自定义展开，收缩图标．easyUI tree数据节点有iconCls配置可以给节点配置自定义图标，iconCls自定义图标后，对于有子节点的节点，展开和收缩状态都显示的是同一个图标，要想这个节点展开，收缩状态显示不同的图标，需要修改源代码来实现。　　本示例居于jquery-easyui-1.4.4修改，效果如下所示，其他版本的修改应该差不多，找不到..

Ext4更新store总记录数量

2012-12-20评论(0)浏览(827)分类：extjs开发技巧

　　如果ext4的store对象通过loadData方法加载数据时，而不是通过load方法，那么即使配置了reader对象的totalProperty也无法正常获取总的记录数，为0。这样如果需要分页的时候就比较麻烦了，获取不到总的记录数。　　注意：使用store的loadData方法加载的数据是JSON数组，不能是JSON对象。如{total:100,data:[{name:'showbo',addr:'..

jqGrid获取选中数据行

2017-8-2评论(0)浏览(817)分类：jqGrid中文API

　　jqGrid没有提供类似easyui datagrid的getChecked/getSelected方法获取勾选的或者选中的数据行api，所以jqGrid要获取multiselect为true时被勾选的记录，需要自己遍历勾选的checkbox获取id后通过getRowData方法获取数据行。　　jqGrid获取选中数据行源代码如下html headmeta http-equiv=content-type content=text/html;charset=utf-8 /tit..

easyui cell Editing blur编辑器自动保存

2016-9-6评论(0)浏览(813)分类：easyui开发技巧

　　easyui datagrid cell editing编辑器如何失去焦点后自动保存，easyui datagrid cell editing示例点击这里查看，然后点击左边的导航Cell Editing in DataGrid查看效果。　　easyui datagrid cell editing的官方示例，编辑器失去焦点后，如果当前点击的对象不在datagrid的数据容器内容，如点击了datagrid数据区域外的对象，如datagrid的表头，..

jqGrid单元格/行编辑模式下getRowData如何获取数据行

2013-9-5评论(0)浏览(812)分类：jqGrid中文API

　　jqGrid API已经明说过，编辑模式下不要调用getRowData，要不得到数据行列信息包含的是单元格的innerHTML，而不是实际输入控件的值。参考jqGrid的源代码，getRowData的实现方法是遍历tr获取td的innerhTML。　　getRowData在单元格和行编辑模式下受到影响，在表单编辑模式没问题，因为表单没有直接修改jqGrid生成输入对象，而是在新的控件中生..

判断easyui datagrid是否全选

2015-12-29评论(0)浏览(788)分类：easyui开发技巧

　　如何判断easyui datagrid checkbox全选框是否勾选，如何判断easyui datagrid 所有数据库被勾选。　　判断easyui datagrid是否全选源代码如下//直选调用getChecked获取勾选的数据行和当前getRows的数据行长度一致即可知道是否全部选中记录 if($('#dg').datagrid('getChecked').length==$('#dg').datagrid('getRo..

cordova/phonegap实现再按一次退出效果

2015-6-9评论(0)浏览(788)分类：phonegap/cordova

　　cordova/phonegap实现再按一次退出效果，退出phonegap/cordova项目的接口API为navigator.app.exitApp()，但是，cordova的api里面没有app的介绍。　　cordova/phonegap实现再按一次退出效果源代码如下　　提示信息在android真机上测试时，提示信息exitNote对象如果position指定为fixed不会出现，但是模拟设备上可以显示，不知道什么问题。指定..

Ext4.1如何禁止对某些单元格进行编辑

2013-1-6评论(0)浏览(779)分类：extjs开发技巧

　　Ext4.1如何禁止对某列进行编辑，或者对一些特殊的单元格不允许进行编辑　　可以通过beforeedit事件对单元格进行判断，不符合编辑的单元格单击编辑时return false阻止生成输入控件。　　Ext4.1 Ext.grid.PanelView事件的介绍如下beforeedit( editor, e, eOpts )：Forwarded event from Ext.grid.plugin.Editing.Fires before editing is trig..

easyui combobox删除指定项目

2017-4-14评论(1)浏览(775)分类：easyui开发技巧

　　easyui combobox没有提供datagrid类似的deleteRow方法删除数据行，要删除combobox的下拉项目，可以直接操作数据源来实现easyUI combobox下拉项目的删除。getData获取数据后删除数据源中的项目，然后再loadData加载下数据源就行。　　easyui combobox删除指定项目源代码如下，居于jquery-easyui-1.4.3/demo/combobox/basic.html修改。script ..

datagrid编辑状态下调用acceptChanges后getChecked无法获取勾选的数据

2014-4-4评论(0)浏览(768)分类：easyui开发技巧

　　easyui datagrid在编辑状态下，用鼠标勾选了数据行后，在调用acceptChanges接受数据更改，恢复到不可编辑状态时，此时调用getChecked无法获取到之前在编辑状态下勾选的数据，虽然此时数据行前面的复选框checkbox还是在勾选的状态。　　经过研究源代码发现，应该是easyui datagrid的bug，datagrid getChecked获取勾选的数据行是通过判断tr是否..

ext4使用JSONP跨域验证

2013-1-30评论(0)浏览(767)分类：extjs开发技巧

　　ext4支持发送jsonp请求，所以当跨域页面支持jsonp操作时，可以使用ext4.0的Ext.data.JsonP来实现跨域验证或者获取数据。　　jsonp具体的跨域原理可以看这个：JSONP跨域　　下面为一个简单使用ext4实现跨域验证的示例代码，返回客户端一些验证信息。只作为研究使用，安全性基本没有。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://..

ext4/ext5 tree树节点搜索展开示例

2015-12-4评论(0)浏览(767)分类：extjs开发技巧

　　extjs如何通过关键字查找树节点，并且展开找到的tree节点。本示例在ext-5.1.0，ext-4.1.1a下测试通过。titleext4，ext5的tree树节点搜索示例/title关键字：input type=text id=t /input type=button value=搜索所有节点并展开 onclick=findNode() /script var rootNode,store,tree; Ext.onReady(function () { store = Ext.cre..