EasyUi datagrid window

工作需要做了以下的demowindow里面装了一个datagrid1.datagrid自动适应window的大小,当window resize的时候自动适应。2.datagrid里面加一个custom列,且绑定点击事件。能拿到当前列的rowData

<div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:‘icon-save‘" style="width: 800px; height: 200px; padding: 10px;">

    <table class="easyui-datagrid" id="dg" data-options="fitColumns:true,singleSelect:true,autoRowHeight:true,fit: true">
        <thead>
            <tr>
                <th data-options="field:‘code‘">Code</th>
                <th data-options="field:‘name‘">Name</th>
                <th data-options="field:‘price‘">Price</th>
                <th data-options="field:‘price1‘,formatter:formatCustomerId">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>name1ddasasasasasasasasasasasasasasaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>2323</td>
                <td>2323</td>
            </tr>
            <tr>
                <td>002</td>
                <td>name2</td>
                <td>4612</td>
                <td>2323</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="bu" value="aaa"></button>
    <a href=‘#‘ class=‘easyui-linkbutton‘>操作</a>
<script type="text/javascript">
    $(function () {
        //$("#bu").click(function() {
        //    $(‘#dg‘).datagrid(‘resize‘);
        //});
        //$("#w").resizable({
        //    onStopResize: function () {
        //        //$("#dg").width($("#id").width());
        //        alert(‘a‘);
        //        $(‘#dg‘).datagrid(‘resize‘);
        //    }
        //});
    });
    function formatCustomerId(val, row, index) {
        return ‘<a href="#" onClick="test(‘+index +‘)">操作</a>‘;
    }

    function test(index) {
        $(‘#dg‘).datagrid(‘selectRow‘, index);
        var row = $(‘#dg‘).datagrid(‘getSelected‘);
        alert(index + row.name);
    }
</script>
时间: 2024-11-03 20:45:39

EasyUi datagrid window的相关文章

easyUI datagrid笔记

easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <link rel="stylesheet" type="text/css" href="./css/easyui.css"> <link rel="stylesheet" type="text/css"

easyui datagrid 导出excel

本片文章是介绍如何用ajax的方式将easyui中的datagrid数据导出到excel中. 声明:该代码是在参考前人的代码写出来的,并非我原创,我只是新增了些功能. 新增部分: 1. 对于列是枚举列的可以设置枚举值,导出时会自动替换列中的枚举值,详细见用例代码. 2. 新增导出时不导出首列或末列指定个数的列,详细接用例代码. 下面是插件源码: /** Jquery easyui datagrid js导出excel 修改自extgrid导出excel * allows for download

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1.Html代码 1 <script type="text/javascript" src="/js/easyui/jquery.min.js"></script> 2 <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 3 <script type="tex

EasyUi DataGrid 请求Url两次问题

easyui datagrid 1.4 当total为0时,请求两次url问题 框架问题:需要在easyui文件后加修补补丁 /** * The Patch for jQuery EasyUI 1.4 */ (function($){ var plugin = $.fn._size; $.fn._size = function(options, parent){ if (typeof options != 'string'){ return this.each(function(){ paren

jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条

jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www.cnblogs.com/fanshuyao/ 一.问题描述: 当jquery easyui datagrid中数据量大时,body页面又设置高度超出隐藏时(如:overflow-y:hidden)时,这时datagrid加载满整个页面时也无滚动条. 二.解决方案: 给datagrid绑定onLoad

把旧系统迁移到.Net Core 2.0 日记(8) - EASYUI datagrid

迁移也没太大变化,有一个, 之前的Request.QueryString 是返回NameValueCollection, 现在则是返回整个字符串. 你要改成Request.Query[“key”] 直接上代码吧. 1 @using FoxCRMCore 2 @{ 3 var controller = "CRM/Announcement"; 4 ViewBag.Title = "公告信息"; 5 } 6 7 8 <script type="text/j