`

dategrid 创建,重写分页

阅读更多
	$('#dg').datagrid({   
			    url:'<%=request.getContextPath()%>/school/school_selectAllSchools.action',
			   // title:'学校管理',
			    //iconCls:'icon-edit',//图标
			     pagination:true,
			     //idField:'id',
			     frozenColumns:[[   //checkbox
            	{field:'ck',checkbox:true}   
       			 ]] 
			}); 
	//分页	
	   var p = $('#dg').datagrid('getPager');   
	    $(p).pagination({   
	        pageSize: 10,//每页显示的记录条数,默认为10   
	        pageList: [5,10,15],//可以设置每页记录条数的列表   
	        beforePageText: '第',//页数文本框前显示的汉字   
	        afterPageText: '页    共 {pages} 页',   
	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录' 
	    }); 
	});
 /**动态查询-传递参数给dategrid**/
 function searchSchool(){
  var name = $('#name').val();
  var masters =$('#masters').val();
   $('#dg').datagrid({
    queryParams: {
     name: name,
     masters: masters
    }
   });
   var p = $('#dg').datagrid('getPager');   
      $(p).pagination({   
          pageSize: 10,//每页显示的记录条数,默认为10   
          pageList: [5,10,15],//可以设置每页记录条数的列表   
          beforePageText: '第',//页数文本框前显示的汉字   
          afterPageText: '页    共 {pages} 页',   
          displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录' 
      }); 
 }
/**批量删除**/
function removeSchool(){
 var rows = $('#dg').datagrid("getSelections"); //获取你选择的所有行 
 /*
 //获取表格选择行
 alert(rows.length);
 for(var i =0;i<rows.length;i++){
  var ins = $('#dg').datagrid('getRowIndex',rows[i]);//获取某行的行号
  alert(ins+'-'+rows[i].id);
  $('#dg').datagrid('deleteRow',ins); //通过行号移除该行
 }
 */
 if(!rows || rows.length == 0){
  $.messager.alert('提示','请选择要删除的数据','info');
  return;
 }
 var parm;
 $.each(rows,function(i,n){
  if(i == 0){
   parm = 'ids=' +n.id;
  }else{
   parm +=',' +n.id;
  }
  alert(parm);
 });
 $.messager.confirm('提示','是否删除选中的数据?',function(r){
  if(!r){
   return;
  }
  //提交
  $.post('<%=request.getContextPath()%>/school/school_deleteAllSchools.action',parm,function(msg){
   if(msg.indexOf('success') != -1){
    $.messager.alert('提示','批量删除成功','info',function(){
     //重新加载当前页
     $('#dg').datagrid('reload');
    });
   }else{
    $.messager.alert('提示',msg.Message,'info');
   }
  });
 });
}
   <!-- 表格数据 -->
   <table id="dg" style="width:auto;height:350px"
      toolbar="#toolbar" rownumbers="true" 
      fitColumns="true" singleSelect="false">
     <thead>
      <tr>
       <th field="name" width="150">学校名称</th>
       <th field="masters" width="150">校长</th>
       <th field="net" width="150">学校网址</th>
       <th field="address" width="300">学校地址</th>
      </tr>
     </thead>
   </table>

 

  • 大小: 20.3 KB
分享到:
评论

相关推荐

    easyui的dategrid项目

    EasyUI的DateGrid支持分页,可以通过设置`pagination`属性启用,并指定每页的数据条数。后端需要根据当前页码和每页大小计算查询范围,返回对应的分页数据。 总的来说,"easyui的dategrid项目"是一个典型的前后端...

    ssh+easyui+dategrid

    DateGrid支持分页、排序、过滤、编辑等功能,可以轻松地与后台数据源进行交互,实现数据的增删改查。此外,DateGrid还可以自定义列模板,满足各种复杂的显示需求。 在项目描述中提到“框架版本可能有点低,但不影响...

    Flex DateGrid表头全选

    NULL 博文链接:https://fhuan123.iteye.com/blog/721237

    flex中dategrid自适应宽度实现

    flex中让dategrid里面的列宽根据内容自适应宽度的方法

    数据库和dategrid使用简单例子

    总结一下,"数据库和dategrid使用简单例子"这个主题涵盖数据库基础、SQL语言的使用、以及datagrid控件在数据展示和交互中的应用。通过学习和实践这个例子,初学者能够掌握如何连接数据库,操作数据,以及使用...

    权限管理EasyUI tree 及DateGrid 项目案例

    【权限管理EasyUI tree 及DateGrid 项目案例】是一个基于EasyUI框架的Web应用程序,主要目的是实现用户权限的登录管理和界面展示。EasyUI是一个基于jQuery的轻量级UI库,它提供了丰富的组件,简化了网页开发过程。在...

    DateGrid与后台数据交互(官网上有php版)

    DateGrid与后台数据交互的简单demo(部分功能需要自己继续完善),解压后部署即可运行

    DateGrid:可自定义的swiftui日历

    Xcode签出源代码并解析版本后,您可以选择“ DateGrid”库并将其添加到您的应用程序目标中。 用法 DateGrid ( interval : dateInterval , selectedMonth : $selectedMonthDate, mode : mode) { dateGridDate in ...

    DateGrid(WinForm)行或单元格变色控件

    对于列,可以设置`DefaultCellStyle.AlternatingBackColor`以创建交替行色效果。 4. **性能优化**:由于每次单元格或行重绘都会触发这些事件,所以要确保条件判断尽可能高效,避免不必要的计算,以防止性能下降。 ...

    vb DataGrid 控件的使用

    - **创建应用程序**:无需编写大量代码,只需通过设计时特性即可创建数据库应用程序。一般步骤包括创建数据链接、放置ADO Data控件并设置RecordSource,接着放置DataGrid并设置DataSource,然后可以通过右键菜单...

    Flex动态创建DataGrid设置图片

    本教程主要聚焦于如何在Flex中动态创建DataGrid,并向其中添加图片,这在创建交互式、富媒体应用时非常有用。通过以下两种方法,你可以实现这个功能。 ### 方法一:使用ItemRenderer 1. **定义ItemRenderer**: ...

    25.Xaml DateGrid控件->默认单选,可以多项选择的网格控件

    DateGrid 控件是WPF中常用的一种数据展示和操作的组件,它提供了类似电子表格的功能,可以展示大量数据并支持各种交互操作。在描述中提到的“25.Xaml DateGrid控件”可能是指一个特定的教程或项目,其目标是实现一个...

    如何解决VB中的Grid控件的打印问题

    - 创建一个新的Excel工作簿。 - 将Grid控件中的数据写入Excel。 - 设置Excel表格样式。 - 使用Excel的打印功能。 2. **导出数据到Word**: - 创建一个新的Word文档。 - 将Grid控件中的数据以表格形式插入到...

    JQuery中dategrid编辑状态下的数据长度限制方法小结[整理].pdf

    在jQuery的DataGrid插件中,用户经常需要在编辑状态下处理数据,这涉及到对数据长度的控制,以确保数据能够符合数据库字段的长度限制。以下是几种实现数据长度限制的方法: 一、数值类型(int)的长度限制: ...

    动态可编辑的DataGrid

    在该文件中,我们可以找到关于如何处理数据源、设置列宽、创建自定义渲染器以及响应用户交互的代码。 `RendererUtil.as`可能是用来处理DataGrid单元格渲染的工具类。在Flex中,每个单元格都可以有自己的渲染器,...

    Flex 动态给DataGrid增加行

    Flex 动态给DataGrid增加行,可编辑行数据

    VB6.0中DataGrid的应用.doc

    VB6.0中DataGrid的应用详解 DataGrid控件是VB6.0中的一种强大且灵活的控件,能够显示一个Recordset对象的...开发者可以使用DataGrid控件来创建一个数据库应用程序,快速地配置控件,编辑数据和修改控件的外观和行为。

    如何伪造“冻结” datagridview的最后一行。 为datagridview创建一个页脚行。

    1. 创建一个自定义的DataGridView类,重写OnPaint方法。 2. 在OnPaint方法中,检测是否已经绘制到最后一行,如果是,则开始绘制“页脚行”。 3. “页脚行”的数据计算通常在数据绑定完成后进行,可以利用...

    DataGrid控件使用技巧

    ### DataGrid控件使用技巧详解 #### 一、DataGrid正反双向排序 在ASP.NET中,使用DataGrid控件可以轻松实现数据的展示与管理。对于数据排序,DataGrid提供了便捷的方式,但默认情况下只能支持单项排序。...

    WPF DataTrigger按输入改变颜色

    在描述中提到的场景,我们可以创建一个TextBox,并将其TextProperty绑定到某个数据源的属性,比如`ColorName`。这个属性会存储用户输入的颜色名称。接下来,我们将在TextBox的样式中定义一个DataTrigger,如下所示:...

Global site tag (gtag.js) - Google Analytics