精华内容
下载资源
问答
  • DataGrid

    万次阅读 2016-08-05 10:49:30
    DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列...

    DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

    <table id="dg"></table>  
    
    	<table id="dg"></table>
     
    
    $('#dg').datagrid({    
        url:'datagrid_data.json',    
        columns:[[    
            {field:'code',title:'Code',width:100},    
            {field:'name',title:'Name',width:100},    
            {field:'price',title:'Price',width:100,align:'right'}    
        ]]    
    });  
    

     

    DataGrid属性

    下面是DataGrid控件添加的属性。

    属性名属性值类型描述默认值
    columnsarrayDataGrid列配置对象,详见列属性说明中更多的细节。undefined
    frozenColumnsarray同列属性,但是这些列将会被冻结在左侧。undefined
    fitColumnsboolean真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。false
    resizeHandlestring

    调整列的位置,可用的值有:'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列,等等。(该属性自1.3.2版开始可用)

    right
    autoRowHeightboolean定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。true
    toolbararray,selector顶部工具栏的DataGrid面板。可能的值:
    1) 一个数组,每个工具属性都和linkbutton一样。
    2) 选择器指定的工具栏。

    在<div>标签上定义工具栏:

    $('#dg').datagrid({
    	toolbar: '#tb'
    });
    <div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
    </div>
    

    通过数组定义工具栏:

    $('#dg').datagrid({
    	toolbar: [{
    		iconCls: 'icon-edit',
    		handler: function(){alert('编辑按钮')}
    	},'-',{
    		iconCls: 'icon-help',
    		handler: function(){alert('帮助按钮')}
    	}]
    });
    
    null
    stripedboolean是否显示斑马线效果。false
    methodstring该方法类型请求远程数据。post
    nowrapboolean如果为true,则在同一行中显示数据。设置为true可以提高加载性能。true
    idFieldstring指明哪一个字段是标识字段。null
    urlstring一个URL从远程站点请求数据。null
    dataarray,object数据加载(该属性自1.3.2版开始可用)

    代码示例:

    $('#dg').datagrid({
    	data: [
    		{f1:'value11', f2:'value12'},
    		{f1:'value21', f2:'value22'}
    	]
    });
    
    null
    loadMsgstring在从远程站点加载数据的时候显示提示消息。Processing, please wait …
    paginationboolean如果为true,则在DataGrid控件底部显示分页工具栏。false
    rownumbersboolean如果为true,则显示一个行号列。false
    singleSelectboolean如果为true,则只允许选择一行。false
    checkOnSelectboolean如果为true,当用户点击行的时候该复选框就会被选中或取消选中。
    如果为false,当用户仅在点击该复选框的时候才会呗选中或取消。
    (该属性自1.3版开始可用)
    true
    selectOnCheckboolean

    如果为true,单击复选框将永远选择行。
    如果为false,选择行将不选中复选框。
    (该属性自1.3.2版开始可用)

    true
    pagePositionstring定义分页工具栏的位置。可用的值有:'top','bottom','both'。
    (该属性自1.3.2版开始可用)
    bottom
    pageNumbernumber在设置分页属性的时候初始化页码。1
    pageSizenumber在设置分页属性的时候初始化页面大小。10
    pageListarray在设置分页属性的时候 初始化页面大小选择列表。[10,20,30,40,50]
    queryParamsobject在请求远程数据的时候发送额外的参数。

    代码示例:

    $('#dg').datagrid({
    	queryParams: {
    		name: 'easyui',
    		subject: 'datagrid'
    	}
    });
    
    {}
    sortNamestring定义哪些列可以进行排序。null
    sortOrderstring定义列的排序顺序,只能是'asc'或'desc'。asc
    multiSortboolean定义是否允许多列排序。(该属性自1.3.4版开始可用)false
    remoteSortboolean定义从服务器对数据进行排序。true
    showHeaderboolean定义是否显示行头。true
    showFooterboolean定义是否显示行脚。false
    scrollbarSizenumber滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。18
    rowStylerfunction返回样式如'background:red'。带2个参数的函数:
    rowIndex:该行索引从0开始
    rowData:与此相对应的记录行。

    代码示例:

    $('#dg').datagrid({
    	rowStyler: function(index,row){
    		if (row.listprice>80){
    			return 'background-color:#6293BB;color:#fff;';
    		}
    	}
    });
    译者注(1.3.4新增方式):
    
    
    $('#dg').datagrid({
    	rowStyler: function(index,row){
    		if (row.listprice>80){
    			return 'rowStyle';    // rowStyle是一个已经定义了的ClassName(类名)
    		}
    	}
    });
    
     
    loaderfunction定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数:
    param:参数对象传递给远程服务器。
    success(data):当检索数据成功的时候会调用该回调函数。
    error():当检索数据失败的时候会调用该回调函数。
    json loader
    loadFilterfunction返回过滤数据显示。该函数带一个参数'data'用来指向源数据(即:获取的数据源,比如Json对象)。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象。

    代码示例:

    // 从Web Service(asp.net、java、php等)输出的JSON对象中移除'd'对象
    $('#dg').datagrid({
    	loadFilter: function(data){
    		if (data.d){
    			return data.d;
    		} else {
    			return data;
    		}
    	}
    });
    
     
    editorsobject定义在编辑行的时候使用的编辑器。预定义编辑器
    viewobject定义DataGrid的视图。默认视图


    列属性

    DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。

    代码示例:

    1. columns:[[   
    2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
    3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
    4.     {title:'Item Details',colspan:4}   
    5. ],[   
    6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
    7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
    8.     {field:'attr1',title:'Attribute',width:100},   
    9.     {field:'status',title:'Status',width:60}   
    10. ]]  

    属性名称属性值类型描述默认值
    titlestring列标题文本。undefined
    fieldstring列字段名称。undefined
    widthnumber列的宽度。如果没有定义,宽度将自动扩充以适应其内容。undefined
    rowspannumber指明将占用多少行单元格(合并行)。undefined
    colspannumber指明将占用多少列单元格(合并列)。undefined
    alignstring指明如何对齐列数据。可以使用的值有:'left','right','center'。undefined
    halignstring指明如何对齐列标题。可以使用的值有:'left','right','center'。如果没有指定,则按照align属性进行对齐。
    (该属性自1.3.2版开始可用)
    undefined
    sortableboolean如果为true,则允许列使用排序。undefined
    orderstring默认排序数序,只能是'asc'或'desc'。
    (该属性自1.3.2版开始可用)
    undefined
    resizableboolean如果为true,允许列改变大小。undefined
    fixedboolean如果为true,在"fitColumns"设置为true的时候阻止其自适应宽度。undefined
    hiddenboolean如果为true,则隐藏列。undefined
    checkboxboolean如果为true,则显示复选框。该复选框列固定宽度。undefined
    formatterfunction单元格formatter(格式化器)函数,带3个参数:
    value:字段值。
    rowData:行记录数据。
    rowIndex: 行索引。

    代码示例:

    $('#dg').datagrid({
    	columns:[[
    		{field:'userId',title:'User', width:80,
    			formatter: function(value,row,index){
    				if (row.user){
    					return row.user.name;
    				} else {
    					return value;
    				}
    			}
    		}
    	]]
    });
    
    undefined
    stylerfunction单元格styler(样式)函数,返回如'background:red'这样的自定义单元格样式字符串。该函数带3个参数:
    value:字段值。
    rowData:行记录数据。
    rowIndex: 行索引。

    代码示例:

    $('#dg').datagrid({
    	columns:[[
    		{field:'listprice',title:'List Price', width:80, align:'right',
    			styler: function(value,row,index){
    				if (value < 20){
    					return 'background-color:#ffee00;color:red;';
    				}
    			}
    		}
    	]]
    });
    
    undefined
    sorterfunction用来做本地排序的自定义字段排序函数,带2个参数:
    a:第一个字段值。
    b:第二个字段值。

    代码示例:

    $('#dg').datagrid({
    	remoteSort: false,
    	columns: [[
    		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
    			sorter:function(a,b){  
    				a = a.split('/');  
    				b = b.split('/');  
    				if (a[2] == b[2]){  
    					if (a[0] == b[0]){  
    						return (a[1]>b[1]?1:-1);  
    					} else {  
    						return (a[0]>b[0]?1:-1);  
    					}  
    				} else {  
    					return (a[2]>b[2]?1:-1);  
    				}  
    			}  
    		}
    	]]
    });
    
    undefined
    editorstring,object指明编辑类型。当字符串指明编辑类型的时候,对象包含2个属性:
    type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
    options:对象,object, 该编辑器属性对应于编辑类型。
    undefined



    展开全文
  • datagrid

    千次阅读 2012-11-30 08:02:09
    var queryParams = $('#dataGrid').datagrid('options').queryParams;  var roomNum = $.trim($("#condition.roomNum").val());  // condition对应action的实例变量condition  queryParams["condition....

          //多条件查询方法
             function tsearch() {
                 var hoistalName = $("#hoistalName").combobox("getValue");
                 var depName = $("#depName").val();
                 alert(depName);
                     $('#dg').datagrid('options').pageNumber = 1;  
                     $('#dg').datagrid('getPager').pagination({pageNumber: 1});
                   $('#dg').datagrid('options').url = 'ashx/DepartmentsManagerService.ashx?action=search&hospName='+hoistalName+'&depName='+depName;
                   $('#dg').datagrid("reload");
             }


    function query (){

    // 获取查询参数

    var queryParams = $('#dataGrid').datagrid('options').queryParams;

           var roomNum = $.trim($("#condition.roomNum").val());

           // condition对应action的实例变量condition

           queryParams["condition.roomNum"] = roomNum;

           // 重置查询页数为1

           $('#dataGrid').datagrid('options').pageNumber = 1;

           var p = $('#dataGrid_queryYmjtcy').datagrid('getPager');

           if (p){

               $(p).pagination({

                  pageNumber:1

               });

           }

           // 刷新列表数据

           $('#dataGrid_queryYmjtcy').datagrid('reload');

        }

     

    展开全文
  • easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
  • datagrid嵌套datagrid

    2015-10-09 08:44:18
    !...上面是我想要的最终结果的效果图。 图中分上下两个表格。现在这两个datagrid表格是相对独立的表格。 我想让这两个datagrid表格合并为一个,效果是上下显示。 这两个datagrid表格中的每个字段是不一样的。
  • datagrid list

    2017-04-24 22:29:30
    datagrid list
  • jeasyui-datagrid-datagrid

    2015-03-07 17:57:17
    jeasyui-datagrid-datagrid 开发参考
  • 动态datagrid xml动态datagrid xml动态datagrid xml动态datagrid xml动态datagrid xml
  • edit DataGrid

    2018-05-13 15:35:48
    使用easyui的DataGrid实现即时编辑(CRUD). 使用easyui的DataGrid实现即时编辑(CRUD)
  • jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip
  • wpf dataGrid 分页

    2018-06-07 21:07:32
    wpf dataGrid 分页wpf dataGrid 分页wpf dataGrid 分页wpf dataGrid 分页wpf dataGrid 分页wpf dataGrid 分页wpf dataGrid 分页
  • Nextras数据网格 强大的API易于使用的datagrid。 安装 使用作曲家: $ composer require nextras/datagrid 文档和来源
  • DataGrid 分组

    2014-12-27 23:45:03
    WPF DATAGRID 分组
  • 自定义datagrid

    2017-07-02 16:59:19
    自定义网页风格的datagrid,通过调整样式可以使这个插件更适合于网络开发
  • C#DataGrid控件使用源码,适合初学者参考学习使用。
  • DataGrid 用法示例

    千次阅读 2016-11-17 00:11:47
    datagrid

    1.xaml

      <Border BorderBrush="#FF009DFF" BorderThickness="1" Margin="2" VerticalAlignment="Stretch" Grid.Row="1">
                    <ScrollViewer VerticalScrollBarVisibility="Auto"  BorderThickness="0">
                        <sdk:DataGrid ItemsSource="{Binding TestList, Mode=TwoWay}" SelectedItem="{Binding SelectTest}" BorderThickness="0" 
                            FontSize="13" Name="dgrid" IsReadOnly="{Binding IsTestListRead}" AutoGenerateColumns="False" 
                                        cal:Message.Attach="[Event CellEditEnded]=[Action TestEnded($view,$eventArgs,dgrid.SelectedItem)];
                                       [Event MouseRightButtonDown]=[Action TestListMouseRightButtonDown($view,$eventArgs,dgrid.SelectedItem)];
                                   [Event MouseRightButtonUp]=[Action TestListMouseRightButtonUp($view,$eventArgs,dgrid.SelectedItem)]">
                            <sdk:DataGrid.RowStyle>
                                <Style TargetType="sdk:DataGridRow">
                                    <Setter Property="Foreground" Value="{Binding Pro_TestState, Mode=TwoWay, Converter={StaticResource dgcolor}}" />
                                </Style>
                            </sdk:DataGrid.RowStyle>
                            <sdk:DataGrid.Columns>
                                <sdk:DataGridTextColumn Header="测试版本" Binding="{Binding Pro_Vision}" Width="1*" IsReadOnly="True"/>
                                <sdk:DataGridTextColumn Header="测试内容" Binding="{Binding Pro_TestValue}"  Width="2.2*" IsReadOnly="True"/>
                                <sdk:DataGridTemplateColumn Header="当前状态" DisplayIndex="6"   CellTemplate="{StaticResource CellState}" IsReadOnly="False" Width="0.8*"
                                                        CellEditingTemplate="{StaticResource EditState}" />
                            </sdk:DataGrid.Columns>
                        </sdk:DataGrid>
                    </ScrollViewer>
                </Border>
    <UserControl.Resources>
    
            <DataTemplate x:Key="CellState">
                <TextBlock Text="{Binding Pro_TestState, Mode=TwoWay}"/>
            </DataTemplate>
            <DataTemplate x:Key="EditState" >
                <ComboBox SelectedIndex="{Binding Pro_TestState, Mode=TwoWay}">
                    <ComboBoxItem Content="待测试" ></ComboBoxItem>
                    <ComboBoxItem Content="已关闭"></ComboBoxItem>
                </ComboBox>
            </DataTemplate>
    
        </UserControl.Resources>

    2.cs

     public void TestEnded(object sender, RoutedEventArgs e, object view)
            {
    
                DataGrid dg = (sender as DataGrid);
                Property vm = (ProjectTestProperty)view;
    
            }
    展开全文
  • datagrid实例

    2015-04-24 15:50:57
    datagrid实例,详细内容是实践了如何使用datagrid实现一个Web页面可以和后台互动的表格
  • 角度数据网格 Angular Datagrid 实验
  • C#语言,WPF开发,使用的datagrid控件的一些特性
  • WPF分页DataGrid

    千次下载 热门讨论 2012-05-29 15:30:31
    最近用到WPF的表格控件,需要使用分页功能,找了很多...有些是模仿SL做的DataPager导航条,使用的时候还要和DataGrid组合使用,不是很方便。最好还是继承DataGrid的分页表格控件。 于是自己动手封装了一个分页表格。
  • DataGrid中嵌套DataGrid

    2007-11-27 16:48:46
    DataGrid中嵌套DataGrid,修改后也适用DataGrid中嵌套DataList,DataList中嵌套DataList
  • axui-datagrid 演示: : 安装 npm install axui-datagrid 跑步 git clone https://github.com/jsdevkr/axui-datagrid.git cd axui-datagrid npm i npm start 特征 大数据 冻结行/列 多头 加载中 行选择器 内联...
  • Xamarin.Forms.DataGrid Xamarin.Forms应用程序的DataGrid库。 您可以从NuGet程序包管理器安装程序包 pm > Install-Package Xamarin.Forms.DataGrid 支持平台 安卓 的iOS 超人 用法() 从Xaml使用之前,应先...
  • wpf datagrid控件

    2017-12-02 22:45:23
    这是一个c#版本的wpf datagrid控件,实现自定义wpf datagrid控件。
  • WPFDataGrid

    2013-09-27 09:32:29
    WPF DataGrid,适合初学者学习。
  • Datagrid控件

    2014-06-29 21:59:20
    datagrid,鼠标滚动浏览datagrid表格中显示的数据记录
  • easyui datagrid 各种视图view
  • 【注意,已经出2.0DataGrid.....啦】 有的时候,会遇到DataGrid里面嵌套DataGrid(重叠嵌套),然后里面的鼠标滚轮无法响应外面的滚动,为此记录下解决方案,详情请移步:...
  • 为 React 精心打造的 DataGrid 在查看演示 安装 $ npm install react-datagrid --save 变更日志 查看 路线图 查看 用法 请在您的项目中包含样式表index.css 。 如果你使用webpack和css-loader ,你可以要求它: ...
  • easyui datagrid表格打印,支持formatter格式化数据的打印,还原的最初datagrid 的表格数据

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,040
精华内容 35,616
关键字:

datagrid