在用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处理过的东西。

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

  1. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  2. easyui 中datagrid 点击行的事件

    $('#datagrid 的ID').datagrid({                onClickRow:function(index,data)                {        ...

  3. easyui datagrid 点击列表头排序出现错乱的原因

    之前我的导师,也就是带我的同事,使用datagrid,发现点击列表头排序出现乱序,按理说只有顺序和逆序两种排序结果.因为他比较忙,当时没解决,把排序禁掉了,后来又要求一定要排序,所以他交给我. 一开始 ...

  4. easyui datagrid 单元格 编辑时 事件 修改另一单元格

    //datagrid 列数据 $('#acc').datagrid({ columns : [ [ { field : 'fee_lend', title : '收费A', width : 100, ...

  5. easyui datagrid 去除单击行选中事件

    转:http://www.xue163.com/588880/39049/390490560.html 解决方案: onClickRow: function (rowIndex, rowData) { ...

  6. easyui datagrid实现拖动表头

    $.extend($.fn.datagrid.methods, { columnMoving: function (jq) { return jq.each(function () { var tar ...

  7. EasyUi datagrid 单选框选中事件

    Easyui datagrid中的单选框默认是这样定义的 columns: [[ { field: 'CK', title: '', checkbox: true, width: 30 }]]. 平常 ...

  8. easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  9. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

随机推荐

  1. 每天一个linux命令(39):grep 命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  2. 《C与指针》第八章练习

    本章问题 1.根据下面给出的声明和数据,对每个表达式进行求值并写出它的值.在对每个表达式进行求值时使用原先给出的值(也就是说,某个表达式的结果不影响后面的表达式).假定ints数组在内存中的起始位置是 ...

  3. Visual-Studio-2015-Cheat-Sheet Visual Studio 2015 快捷键列表

    PDF 文件下载 http://files.cnblogs.com/files/JamesLi2015/Visual-Studio-2015-Cheat-Sheet.pdf

  4. 【WP8.1开发】选择与搜索联系人

    在需要的情况下,可以通过相关的API来访问手机上的联系人信息:当然,在不必要的情况下,不要随便去获取别人的数据. 要从联系人列表中选择并获取一位或者N位联系人的详细信息,比较简单的做法是利用Conta ...

  5. JSP网站开发基础总结《八》

    JSP的学习总结到本篇已经八篇了,内容比较多,但都是实战,本篇最后为大家介绍一个小效果:百度分页.就是当我们遍历的数据对象较多时,这时我们就会看到了这个效果了,那他是如何实现的呢?下面我们就一起学习一 ...

  6. How Spring Boot Autoconfiguration Magic Works--转

    原文地址:https://dzone.com/articles/how-springboot-autoconfiguration-magic-works In my previous post &qu ...

  7. 记一次上传文件到七牛云存储的经历(Plupload & UEditor)(.net)

    七牛 配置ACCESS_KEY和SECRET_KEY Qiniu.Conf.Config.ACCESS_KEY = "ACCESS_KEY"; Qiniu.Conf.Config. ...

  8. DA - 信息分析思路概要

    要素 局部 --->整体 显性 --->隐性 表面 --->本质 割裂 --->联系 特殊 --->普遍 串行 --->并发 纵向 --->横向 单点 --- ...

  9. 12款界面精美的 HTML5 & CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  10. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...