精华内容
下载资源
问答
  • 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控件添加的属性。

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

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

    right
    autoRowHeight boolean 定义设置行的高度根据该行的内容设置为false可以提高负载性能 true
    toolbar array,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
    striped boolean 是否显示斑马线效果。 false
    method string 该方法类型请求远程数据。 post
    nowrap boolean 如果为true,则在同一行中显示数据。设置为true可以提高加载性能。 true
    idField string 指明哪一个字段是标识字段。 null
    url string 一个URL从远程站点请求数据。 null
    data array,object 数据加载(该属性自1.3.2版开始可用)

    代码示例:

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

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

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

    代码示例:

    $('#dg').datagrid({
    	queryParams: {
    		name: 'easyui',
    		subject: 'datagrid'
    	}
    });
    
    {}
    sortName string 定义哪些列可以进行排序。 null
    sortOrder string 定义列的排序顺序,只能是'asc'或'desc'。 asc
    multiSort boolean 定义是否允许多列排序。(该属性自1.3.4版开始可用) false
    remoteSort boolean 定义从服务器对数据进行排序。 true
    showHeader boolean 定义是否显示行头。 true
    showFooter boolean 定义是否显示行脚。 false
    scrollbarSize number 滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。 18
    rowStyler function 返回样式如'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(类名)
    		}
    	}
    });
    
     
    loader function 定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数:
    param:参数对象传递给远程服务器。
    success(data):当检索数据成功的时候会调用该回调函数。
    error():当检索数据失败的时候会调用该回调函数。
    json loader
    loadFilter function 返回过滤数据显示。该函数带一个参数'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;
    		}
    	}
    });
    
     
    editors object 定义在编辑行的时候使用的编辑器。 预定义编辑器
    view object 定义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. ]]  

    属性名称 属性值类型 描述 默认值
    title string 列标题文本。 undefined
    field string 列字段名称。 undefined
    width number 列的宽度。如果没有定义,宽度将自动扩充以适应其内容。 undefined
    rowspan number 指明将占用多少行单元格(合并行)。 undefined
    colspan number 指明将占用多少列单元格(合并列)。 undefined
    align string 指明如何对齐列数据。可以使用的值有:'left','right','center'。 undefined
    halign string 指明如何对齐列标题。可以使用的值有:'left','right','center'。如果没有指定,则按照align属性进行对齐。
    (该属性自1.3.2版开始可用)
    undefined
    sortable boolean 如果为true,则允许列使用排序。 undefined
    order string 默认排序数序,只能是'asc'或'desc'。
    (该属性自1.3.2版开始可用)
    undefined
    resizable boolean 如果为true,允许列改变大小。 undefined
    fixed boolean 如果为true,在"fitColumns"设置为true的时候阻止其自适应宽度。 undefined
    hidden boolean 如果为true,则隐藏列。 undefined
    checkbox boolean 如果为true,则显示复选框。该复选框列固定宽度。 undefined
    formatter function 单元格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
    styler function 单元格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
    sorter function 用来做本地排序的自定义字段排序函数,带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
    editor string,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');

        }

     

    展开全文
  • datagrid嵌套datagrid

    2015-10-09 08:44:18
    !...上面是我想要的最终结果的效果图。 图中分上下两个表格。现在这两个datagrid表格是相对独立的表格。 我想让这两个datagrid表格合并为一个,效果是上下显示。 这两个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;
    
            }
    展开全文
  • WPF分页DataGrid

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

    千次阅读 2018-11-27 10:33:44
    //Datagrid保存前退出datagrid编辑  var eaRows = $("#gridId").datagrid('getRows');  $.each(eaRows,function(index,item){  $("#gridId").datagrid('endEdit',index);  });...

        //Datagrid保存前退出datagrid编辑  
            var eaRows = $("#gridId").datagrid('getRows');  
            $.each(eaRows,function(index,item){
             $("#gridId").datagrid('endEdit',index);  
            });

    展开全文
  • DataGrid排序

    2017-12-06 14:18:08
    DataGrid是ASP.NET中非常重要的一个控件。它能方便的让我们实现编辑、排序功能;但是排序功能默认的是升序(ASC),能不能让DataGrid同时实现升降序排列呢?这篇文章将给你一个比较好的解决方法。 下面的例子将...
  • WPF DataGrid DataGrid.Columns 使用笔记

    千次阅读 2016-12-26 08:53:15
    WPF DataGrid DataGrid.Columns 使用笔记WPF 中DataGrid 自带的集合编辑器还是非常方便的: Xml代码如下 <DataGrid ItemsSource="{Binding Path=ObcTasks}" AutoGenerateColumns="False"> <DataGrid.Columns>
  • wpf datagrid 单元格颜色 根据条件改变颜色换 根据表datatable动态显示datagrid内容
  • WPF 获得DataGridRow和 DataGridCell的方法

    千次阅读 2018-08-14 11:02:00
    原文:WPF 获得DataGridRow和 DataGridCell的方法 原文地址 简介  在WPF中,DataGrid控件并没有提供访问其DataGridRow或者DataGridCell的方法。 因此我们需要自己来编写获取的方法,这其中主要用到了Items.....
  • ![图片说明](https://img-ask.csdn.net/upload/201612/05/1480923849_204859.png) 一级datagrid编辑没有问题 二级datagrid编辑时只有第一行可以编辑,其他行都报错
  • easyUI DataGrid

    万次阅读 2012-08-03 11:48:21
    从$.fn.panel.defaults继承,覆盖默认值 $.fn.datagrid.defaults. datagrid 以列表形式显示数据,和提供丰富的功能支持,选择, 排序, 分组显示 和编辑数据,datagrid 的设计是为了减少开发时间,和开发者不需要对其...
  • wpf通过datagrid操作数据库,实现datagrid增删改操作。
  • WPF的DataGrid控件 从excel里复制数据然后粘贴到DataGrid,主要卡在怎么获取列号
  • 给easyui datagrid设置title

    万次阅读 2014-05-12 11:03:35
    $("#myDdtagiid").datagrid({title:'new title'}); 或者: $("#myDdtagiid").datagrid('setTitle','new title');
  • DataGrid删除行

    2019-06-14 10:56:30
    - datagrid删除一行 1.先判断是否有选中行 if (datagrid.SelectedIndex > -1) 2.获取选中行信息 DataRowView drv = datagrid.SelectedItem as DataRowView; 3.通过循环匹配主键删除选中行 DataRow[] drsDT ...
  • angularJS datagrid

    千次阅读 2014-06-07 23:52:40
    我用angularJS 写了一个datagrid组件,完全可配置,欢迎使用。 地址:http://youmoo.github.io/angular-datagrid/
  • wpf datagrid简单显示数据

    万次阅读 2017-07-27 14:19:03
    1.在XAML代码中写出固定列,绑定数据名称 ...DataGrid x:Name="DataGrid1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="249" Width="507"> <DataGrid.Columns> &l...
  • 分享一个关于miniUI中选中datagrid中的某行数据,与右侧数据联动的效果: 需求,在查询的结果列表,选中任意一行数据,右侧会加载该条数据的明细数据。 (1)使用鼠标进行行选中,然后触发右侧datagrid的联动 (2)...
  • DataGrid筛选

    千次阅读 2014-09-24 22:33:45
    适合数据源为Binding的DataGrid,基本思路为:
  • easyui Datagrid自适应窗口大小 easyui Datagrid百分比显示宽度
  • datagrid 菜单

    千次阅读 2012-11-24 00:59:23
    DataGrid ContextMenu - jQuery EasyUI Demo $(function(){ $('#tt').datagrid({ url: 'datagrid_data2.json', title: 'DataGrid - ContextMenu', width: 700, height: 'auto',
  • easyui datagrid 数据加载到另一datagrid

    千次阅读 2017-04-12 10:59:35
    var rows = $("#grid").datagrid("getChecked");//获得第一个中选择的数据 $("#ordergrid").datagrid("loadData",rows);//加载已选择的本地数据
  • 在WPF中,DataGrid控件并没有提供访问其DataGridRow或者DataGridCell的方法。   因此我们需要自己来编写获取的方法,这其中主要用到了ItemsControl类的一个实例方法:ItemContainerGenerator。 using System...
  • Jquery datagrid

    千次阅读 2012-11-23 01:43:59
    DataGrid Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data.
  • easyUI 在主datagrid上创建子datagrid

    千次阅读 2012-08-11 11:22:54
    使用datagrid详细视图,用户可以展开一行去显示一个附加的详细信息,任何类容可以加载作为行详细,subgrid(子datagrid)也可以动态加载.这个教程将向你展示如何创建一个子grid在主grid上. 查看 Demo 步骤 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,170
精华内容 14,868
关键字:

datagrid