实现DataGrid拖动和排序


1.html
< HTML >
    
< HEAD >
        
< title > MoveDataGrid </ title >
        
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
        
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
        
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
        
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
    
</ HEAD >
    
< body  MS_POSITIONING ="GridLayout" >
        
< form  id ="Form1"  method ="post"  runat ="server" >
            
< asp:DataGrid  id ="DataGrid1"  style ="BEHAVIOR: url(movegrid.htc)"  runat ="server"  BackColor ="White"
                BorderWidth
="1px"  BorderStyle ="None"  BorderColor ="#CC9966"  CellPadding ="4"  Font-Size ="9pt" >
                
< SelectedItemStyle  Font-Bold ="True"  ForeColor ="#663399"  BackColor ="#FFCC66" ></ SelectedItemStyle >
                
< ItemStyle  ForeColor ="#330099"  BackColor ="White" ></ ItemStyle >
                
< HeaderStyle  Font-Bold ="True"  ForeColor ="#FFFFCC"  BackColor ="#990000" ></ HeaderStyle >
                
< FooterStyle  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ FooterStyle >
                
< PagerStyle  HorizontalAlign ="Center"  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ PagerStyle >
            
</ asp:DataGrid >
        
</ form >
    
</ body >
</ HTML >

2.cs

public   class  MoveDataGrid : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DataGrid DataGrid1;
        
private string constring="";
        
private int nColumn = 0;
        
private void Page_Load(object sender, System.EventArgs e)
        
{
            
string sql="select * from testgrid";
            DataSet ds
=GetDataSet(sql);
            DataGrid1.Attributes.Add(
"dragcolor","gray");
            DataGrid1.Attributes.Add(
"slcolor","#ffffcc");
            DataGrid1.Attributes.Add(
"hlcolor","#BEC5DE");
            nColumn
=ds.Tables[0].Columns.Count;
            
this.DataGrid1.DataSource=ds;
            
this.DataGrid1.DataBind();
        }



        
GetDataSet

        
Web Form Designer generated code

        
private void DataGrid1_ItemCreated(object sender, DataGridItemEventArgs e)
        
{
            
if(e.Item.ItemType==ListItemType.Header)
            
{
                
for(int i = 0;i<nColumn;i++)
                
{                
                    e.Item.Cells[i].Attributes.Add(
"Width","200");
                }

            }

        }

    }
3.源代码下载 /Files/singlepine/moveandsort.rar
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您需要在DataGrid中既能编辑数据,又能通过拖动来进行排序,可以使用EasyUI提供的`datagrid-sort`和`datagrid-rowediting`扩展插件来实现。 首先,您需要在页面中引入这两个插件: ```html <!-- 引入datagrid-sort和datagrid-rowediting的JS文件 --> <script type="text/javascript" src="jquery.datagrid.sort.js"></script> <script type="text/javascript" src="jquery.datagrid.rowediting.js"></script> ``` 然后,在DataGrid的初始化代码中,添加`sort`和`rowediting`属性,并对应配置: ```javascript $('#datagridId').datagrid({ url: 'data.json', columns: [...], sort: { field: 'sortField', // 排序字段 order: 'asc' // 排序顺序 }, rownumbers: true, // 显示行号 rowediting: { clicksToEdit: 1, // 单击一次即可编辑 saveOnBlur: true // 失去焦点时自动保存 } }); ``` 其中,`sort`属性用于配置排序相关的参数,`rowediting`属性用于配置行编辑相关的参数。需要注意的是,在使用`rowediting`插件时,需要将`clicksToEdit`属性设置为1,表示单击一次即可编辑;将`saveOnBlur`属性设置为`true`,表示失去焦点时自动保存。 最后,您还需要在DataGrid的HTML代码中,为DataGrid添加`datagrid-sortable`和`datagrid-row-editing`样式类: ```html <table id="datagridId" class="easyui-datagrid" style="width: 100%; height: 100%;" data-options="..."> <thead> <tr> <th data-options="field:'field1',sortable:true">Field1</th> <th data-options="field:'field2',sortable:true">Field2</th> ... </tr> </thead> <tbody class="datagrid-sortable datagrid-row-editing"></tbody> </table> ``` 这样,您就可以通过拖动行来排序,同时又能编辑数据了。需要注意的是,在使用`rowediting`插件时,如果您的DataGrid中有复选框或单选框列,需要将其设置为不可编辑,否则可能会出现异常。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值