easyui datagrid 点击表头的事件

在用datagrid的时候我们可能要用到点击表头来触发一个function,这里有个简单的例子。

首先你得有个能用的datagrid。

<div>
    <table id="toolbar"></table>
</div>

然后是js里的东西。

function toolbar(){
    alert("dd");
    $("#toolbar").datagrid({
        striped: true,
        url:"toolbar",
        columns:[[
           {field:"name",title:click()},
           {field:"sex", title:"性别"},
           {field:"age", title:"年龄"},
           ]],
           toolbar:[{  
           text:‘增加‘,iconCls:‘icon-add‘,handler:function(){  
           alert(document.getElementById("text").value);}  
           },  
           {text:‘导入‘,iconCls:‘icon-add‘,handler:function(){  
               window.location.href=‘StuImport.aspx‘;  
               }  
           },  
           {text:‘<input id=\"text\" type=\"text\">‘,handler:function(){
               return "<input type=\"text\">";
           }}  
           ],
            });
}

function click(){
    alert("name");
    return "<p id=‘na‘ onclick=‘naclick("+1+")‘>name</p>";
}

这里利用的是datagrid的title可以用一个function生成。

我们可以自由 的在返回值里定义我们想要的东西,用起来相当方便。

如果不想用函数生成的话直接在column里写<p id=‘na‘ onclick=‘naclick()‘>name</p>也一样可以生成.这个可能是easyui吧传过去的值先进性了处理之后又显示出来的

所以我们看到的不是整个的字符串,而是经过html处理过的东西。

时间: 2024-10-24 22:54:00

easyui datagrid 点击表头的事件的相关文章

easyui 中datagrid 点击行的事件

$('#datagrid 的ID').datagrid({                onClickRow:function(index,data)                {                    $("#devicename").val("");                    $("#devicecode").val("");                    $("#res

EasyUi datagrid 动态生成表头

从后台到显示 表头显示数据 /** * 服务器账单明细 * @author Administrator * */ public class ServerBillingDetailInfo implements Serializable{ /** * */ private static final long serialVersionUID = 6802412713642265144L; private Long id;//服务器账单id private String bussinessNum;/

easyui datagrid editor checkbox 单击事件

Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', treeField:'name', columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',titl

easyui datagrid可编辑表格使用经验分享

文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 4.2文本类型编辑器的级联 4.3编辑字段对非编辑字段的依赖 5数据提交与恢复 5.1利用loading提高用户体验 5.2结束编辑后获取原始数据 6常见问题集锦 6.1表头和数据表格错位 7效果演示 对于Easyui的可编辑表格,个人也是较为陌生的,尽管在操作方式上可能比使用表单修改的方式便捷,但

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

DataTables VS EasyUI DataGrid 基础应用 转

DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一下,一个表格插件关注点在以下三个部分基础.高级的和进阶: 基础 排序 分页 搜索 美观 合理的配置 高级 单击和双击行事 选择高亮显示 增删改查 列宽拖动 数据导出 添加序号 进阶 支持的数据类型 行内编辑 合并单元格 自定义表头 高扩展性 易用的API 模块化 所以根据以上列出的这些功能点,Dat

(转)easyui datagrid 部分参数说明

easyui datagrid 部分参数 数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节. undefined frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动. undefined fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动. false autoRowHe

jQuery EasyUI DataGrid API 中文文档

扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_data.json', 3.      columns:[[ 4.          {field:'co