随笔分类 - javascript
摘要：@author YHC一些常见的editors 添加到datagrid以便用户编辑数据,所有的editor都定义在$.fn.datagrid.defaults.editors对象,这个可以继承扩展以便支持新的editor,这个教程将向你展示如何添加一个新的numberspinner编辑器 到datagrid.查看 Demo继承扩展numberspinner编辑器$.extend($.fn.datagrid.defaults.editors, { numberspinner: { init: function(container, options){ ...
阅读全文
摘要：@author YHC可编辑的功能是最近添加到datagrid的,它可以使用户添加一个新行到datagrid,用户也可以更新一个或多个行.这个教程向你展示如何创建一个datagrid 和内联编辑器.查看 Demo创建 DataGrid$(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, ...
阅读全文
摘要：@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
阅读全文
摘要：@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
阅读全文
摘要：@author YHC如果默认的排序行为不满足你的需求,你可以自定义datagrid排序行为.最基础的用户可以定义一个排序函数,函数名是sorter 在列上,这个函数将接受两个值和返回值将作为如下:valueA > valueB => return 1valueA < valueB => return -1自定义排序代码<table id="tt"></table> $('#tt').datagrid({ title:'Custom Sort', iconCls:'icon-ok'
阅读全文
摘要：@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
阅读全文
摘要：@author YHC以下示例格式化在easyui DataGrid 里的列数据,和使用自定义列formatter ,如果价格小于20就将文本变为红色.查看 Demo格式化一个DataGrid 列,我们需要设置formatter 属性它是一个函数,这个格式化函数包含三个参数:value: 当前列对应字段值.row: 当前的row(行)记录数据.index: 当前的行下标.创建 DataGrid<table id="tt" title="Formatting Columns" class="easyui-datagrid" sty
阅读全文
摘要：@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
阅读全文
摘要：@author YHC这个示例演示如何冻结一些列,冻结列不能滚动到视图的外部,当用户移动水平滚动条他将穿过grid.查看 Demo冻结列你需要定义frozenColumns 属性,frozenColumn属性和columns 属性一样.$('#tt').datagrid({ title:'Frozen Columns', iconCls:'icon-save', width:500, height:250, url:'data/datagrid_data.json', frozenColumns:[[ ...
阅读全文
摘要：@author YHCdatagrid 的toolbar能包含的不仅仅只是按钮(button)也可以是其他的任何的组件,你可以简单的定义一个toolbar布局通过一个已存在的DIV 标记它将成为datagrid 的toolbar内容,这个教程将向你展示如何为datagrid创建复杂的toolbar.查看Demo创建Toolbar<div id="tb" style="padding:5px;height:auto"> <div style="margin-bottom:5px"> <a href=&quo
阅读全文
摘要：@author YHC这个示例向你展示如何添加toolbar到datagrid.查看 Demo创建 DataGrid<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="data/datagrid_data.json" title="DataGrid with Toolbar" iconCls="icon-save" toolbar="#tb">
阅读全文
摘要：@author YHC在这个示例中我们将向你展示如何从数据库得到数据显示他们到datagrid,然后演示如何根据用户输入的搜索关键词搜寻显示结果.查看 Demo创建 DataGrid创建 datagrid和分页功能然后添加工具栏到其中.<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid24_getdata.php" toolbar="#tb" title="Lo
阅读全文
摘要：@author YHC这个示例展示我们如何从服务器端加载数据和如何添加pagination 到datagrid.查看 Demo创建 DataGrid从服务器端加载数据, 你应该设置'url'属性, 在你的服务器端你应该返回JSON格式数据.请看datagrid文档得到更多关于它的数据格式信息.<table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid2_getdata.php" ti
阅读全文
摘要：@author YHC这个示例展示,我们如何转换table到datagrid.datagrid的列信息是定义在<thead>标记中,数据是定义在<tbody>标记中,确定设置field名称给所有的数据列,请看以下示例:<table id="tt" class="easyui-datagrid" style="width:400px;height:auto;"> <thead> <tr> <th field="name1" width="50
阅读全文
摘要：@author YHC通常,资源管理器文件夹在XP下的左侧的panel包含一些常见任务,这个教程向你展示如何创建XP左侧面板风格,使用easyui的panel插件.查看 Demo定义一些panel我们定义一些panel显示一些任务,每个panel应该至少有collapse(折叠)/expand(展开)工具按钮.代码看起来就像这些:<div style="width:200px;height:auto;background:#7190E0;padding:5px;"> <div class="easyui-panel" title=&qu
阅读全文
摘要：@author YHC这个教程将向你展示如何创建一个自动播放的tabs.tabs 组件显示第一个tab panel,然后显示第二个,第三个.....,我们将写一些代码自动的切换tab panel,然后让他循环.查看Demo步骤1: 创建 tabs<div id="tt" class="easyui-tabs" style="width:330px;height:270px;"> <div title="Shirt1" style="padding:20px;"> <
阅读全文
摘要：@author YHC当使用jQuery EasyUI 容易的添加tabs,你就应该调用'add'方法.在这个示例中我们将动态的添加tabs使用iframe显示在一个页面上,当点击add按钮一个新的tab将被添加,如果tab已经存在,它将被激活.查看Demo步骤1:创建 tabs<div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','
阅读全文
摘要：@author YHC这个教程将告诉你如何使用easyui创建一个tabs 组件,Tabs 有多个panel可以动态的添加或移除,你可以使用tabs 显示不同的实体在相同的页面.Tabs 一次仅仅显示一个panel,每个panel都有title,icon and close 按钮,当tabs 选中时对应的panel内容将显示.查看 Demo从HTML标记创建Tabs 包含一个DIV容器,和一些DIV panel.<div class="easyui-tabs" style="width:400px;height:100px;"> <di
阅读全文
摘要：@author YHC在这个教程中,你会学习到关于easyuiAccordion,Accordion 包含一个panel的集合,所有panel的header(头部)将显示,但是一次仅仅只有一个panel的body内容显示,当用户点击panel的头部(header),那个panel的内容将成为显示,其余的body内容将成为隐藏.查看示例 Demo我们将创建3个panel,第三个panel包含一个tree菜单.<div class="easyui-accordion" style="width:300px;height:200px;"> <
阅读全文
摘要：@author YHCPanel 允许你创建自定义布局对多种用途.在这个示例我们使用panel和layout插件创建一个msn消息框.查看 Demo我们使用多个layout在面板里面,在消息框的顶部我们放置一个查询输入框,我们也放置一个人的图片在右边,中间的区域我们切割为2部分,通过设置split属性为true,允许用户改变panel区域的大小.以下就是所有代码:<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collaps
阅读全文
