摘要：
@author YHCdialog是一个特殊的window,可以包含工具栏在顶部和按钮在下面,但是默认的dialog不能改变大小,但是用户可以设置resizable 属性为true使其可以改变大小.查看 Demo创建 Dialogdialog非常简单,可以从DIV 创建,就像这样:<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" title="My Dialog" iconCls="ico 阅读全文
随笔分类 - JavaScript
easyUI window和布局
2012-08-11 16:53 by java线程例子, 1571 阅读, 收藏,
摘要：
@author YHCLayout 组件可以内嵌在window组件中,我们可以创建一个复杂的窗体布局甚至不需要写任何的js代码,jquery-easyui框架帮我们做渲染和调整尺寸在后台.作为一个示例我们创建一个window它包含两个部分,一个放置在左边一个放置在右边,在窗体的左边我们创建一个tree,在窗体的右边我们创建一个tabs 容器.<div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;heigh 阅读全文
easyUI 自定义window工具
2012-08-11 16:28 by java线程例子, 252 阅读, 收藏,
摘要：
@author YHC默认的window有四个工具:collapsible,minimizable,maximizable 和closable.如示例我们定义以下window<div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;"> window content </div> 自定义工具,设置该工具为true或者false,如示例我们希望定义一个wi 阅读全文
easyUI 我的第一个window
2012-08-11 16:17 by java线程例子, 251 阅读, 收藏,
摘要：
@author YHC创建一个window 非常简单,我们创建一个DIV标记.<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> Some Content. </div> 现在运行你的测试页面,你会看见一个window 显示在你的屏幕上,我们不需要写任何的javascript代码.如果你希望创建一个隐藏的window,记得设置'clos 阅读全文
easyUI 在主datagrid上创建子datagrid
2012-08-11 11:22 by java线程例子, 371 阅读, 收藏,
摘要：
@author YHC使用datagrid详细视图,用户可以展开一行去显示一个附加的详细信息,任何类容可以加载作为行详细,subgrid(子datagrid)也可以动态加载.这个教程将向你展示如何创建一个子grid在主grid上.查看 Demo步骤 1: 创建主要的 DataGrid<table id="dg" style="width:700px;height:250px" url="datagrid22_getdata.php" title="DataGrid - SubGrid" singleselec 阅读全文
easyUI 展开DataGrid里面的行显示详细信息
2012-08-11 11:09 by java线程例子, 705 阅读, 收藏,
摘要：
@author YHCdatagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图,datagrid可以显示展开按钮("+" 或者 "-")在数据行的左边,用户可以展开一个行去显示一个附加的详细信息.查看 Demo步骤 1: 创建 DataGrid<table id="dg" style="width:500px;height:250px" url="data/datagrid_data.json" title="DataGrid - Expand Row&quo 阅读全文
easyUI 创建一个 Property Grid
2012-08-11 10:53 by java线程例子, 458 阅读, 收藏,
摘要：
@author YHCproperty grid带有一个内置的expand(展开)/collapse(合并)按钮可以简单的为行分组,你可以简单的创建一个可编辑属性的分层(hierarchic)列表.设置通过HTML<table id="tt" class="easyui-propertygrid" style="width:300px" url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 阅读全文
easyUI 根据一些条件改变DataGrid 行背景颜色
2012-08-11 10:45 by java线程例子, 693 阅读, 收藏,
摘要：
@author YHC这个教程将向你展示如何改变datagrid组件行样式根据一些条件,谁的listprice 值大于50我们将设置行为不同的颜色.查看 Demodatagrid的rowStyler函数设计允许你自定义行样式,以下代码展示如何改变行样式:<table id="tt" title="DataGrid" style="width:600px;height:250px" url="data/datagrid_data.json" singleSelect="true" fitCo 阅读全文
easyUI datagrid显示摘要信息在页脚
2012-08-11 10:37 by java线程例子, 438 阅读, 收藏,
摘要：
@author YHC在这个教程中,我们将告诉你如何显示摘要信息行在datagrid页脚.查看 Demo显示页脚行,你应该设置showFooter 属性为true,然后准备页脚行定义在datagrid的数据,以下是示例数据.{"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price&quo 阅读全文
easyUI为datagrid创建自定义视图
2012-08-11 10:30 by java线程例子, 393 阅读, 收藏,
摘要：
@author YHC在不同的情况你可能需要更过灵活的布局为你的datagrid,对于用户来说Card View(卡片视图)是个不错的选择,这个工具可以迅速获取和显示数据在datagrid中,在datagrid的头部,你可以排序数据,仅仅只是需要通过点击列的头部.这个教程将向你展示如何创建自定义(Card View)卡片视图.查看 Demo创建Card View从默认的datagrid视图继承,是个不错的方法用来创建你的自定义视图,我们将要创建一个card view为每行显示一些信息.var cardview = $.extend({}, $.fn.datagrid.defaults.view 阅读全文
easyUI合并DataGrid单元格
2012-08-11 10:17 by java线程例子, 417 阅读, 收藏,
摘要：
@author YHCdatagrid经常需要合并一些单元格,这个教程将向你展示如何在datagrid合并单元格.合并你的datagrid 单元格,简单的调用'mergeCells' 方法和传入合并信息参数告诉datagrid 如何合并单元格,在所有合并单元格中,除了第一个单元格,将会隐藏当单元格合并.查看Demo创建DataGrid<table id="tt" title="Merge Cells" style="width:550px;height:250px" url="data/datagrid 阅读全文
easyUI在可编辑的datagrid中计算两列的值
2012-08-11 10:02 by java线程例子, 410 阅读, 收藏,
摘要：
@author YHC在这个教程中你将学习如何包含一个运算的列在可编辑的datagrid中,一个运算列通常包含一些运算值从一个或多个其他列.查看Demo首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是'unitcost'字段,将是listprice 乘以 amount列的结果.<table id="tt" style="width:600px;height:aut 阅读全文
继承扩展DataGrid的editors
2012-08-10 17:10 by java线程例子, 437 阅读, 收藏,
摘要：
@author YHC一些常见的editors 添加到datagrid以便用户编辑数据,所有的editor都定义在$.fn.datagrid.defaults.editors对象,这个可以继承扩展以便支持新的editor,这个教程将向你展示如何添加一个新的numberspinner编辑器 到datagrid.查看 Demo继承扩展numberspinner编辑器$.extend($.fn.datagrid.defaults.editors, { numberspinner: { init: function(container, options){ ... 阅读全文
启用DataGrid行内编辑器
2012-08-10 17:01 by java线程例子, 241 阅读, 收藏,
摘要：
@author YHC可编辑的功能是最近添加到datagrid的,它可以使用户添加一个新行到datagrid,用户也可以更新一个或多个行.这个教程向你展示如何创建一个datagrid 和内联编辑器.查看 Demo创建 DataGrid$(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, ... 阅读全文
easyUI自定义DataGrid分页栏
2012-08-10 16:47 by java线程例子, 382 阅读, 收藏,
摘要：
@author YHCdatagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个datagrid 和添加一些自定义按钮在分页工具栏.查看 Demo创建 DataGrid<table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px" url="data/datagrid_data.json" iconCls="icon-save&quo 阅读全文
easyUI 添加CheckBox选择到DataGrid
2012-08-10 16:32 by java线程例子, 407 阅读, 收藏,
摘要：
@author YHC这个教程向你展示如何放置一个checkbox 列到datagrid,这个复选框用户将可以选择 选中/取消选中 datagrid行数据.查看 Demo添加一个checkbox 列我们仅仅需要添加一个列的checkbox 属性设置它为true,代码看上去就像这些:<table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550px;height:250px" url="data/datag 阅读全文
easyUI 自定义排序datagrid
2012-08-10 11:35 by java线程例子, 272 阅读, 收藏,
摘要：
@author YHC如果默认的排序行为不满足你的需求,你可以自定义datagrid排序行为.最基础的用户可以定义一个排序函数,函数名是sorter 在列上,这个函数将接受两个值和返回值将作为如下:valueA > valueB => return 1valueA < valueB => return -1自定义排序代码<table id="tt"></table> $('#tt').datagrid({ title:'Custom Sort', iconCls:'icon-ok' 阅读全文
easyUI 添加排序到datagrid
2012-08-10 11:13 by java线程例子, 261 阅读, 收藏,
摘要：
@author YHC这个示例展示如何排序datagrid通过点击列表头.查看 Demo在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true创建an DataGrid<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php" title="Load Data&quo 阅读全文
使用easyUI 格式化datagrid列
2012-08-10 10:18 by java线程例子, 287 阅读, 收藏,
摘要：
@author YHC以下示例格式化在easyui DataGrid 里的列数据,和使用自定义列formatter ,如果价格小于20就将文本变为红色.查看 Demo格式化一个DataGrid 列,我们需要设置formatter 属性它是一个函数,这个格式化函数包含三个参数:value: 当前列对应字段值.row: 当前的row(行)记录数据.index: 当前的行下标.创建 DataGrid<table id="tt" title="Formatting Columns" class="easyui-datagrid" sty 阅读全文
使用easyUI 动态改变datagrid的columns
2012-08-10 10:10 by java线程例子, 412 阅读, 收藏,
摘要：
@author YHCDataGrid 列可以使用'columns' 属性简单的定义,如果你想动态的改变columns,那根本没有问题,改变columns ,你可以重新调用datagrid 方法和传递一个新的columns 属性,就o了.创建DataGrid<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:550px;height:250px" url="data/datagrid_d 阅读全文
浙公网安备 33010602011771号