zoukankan      html  css  js  c++  java
  • easyui 动态添加标签页,总结

    步骤 1:创建 Tabs

    1. <div style="margin-bottom:10px">
    2. <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
    3. <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
    4. <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
    5. </div>
    6. <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    7. <div title="Home">
    8. </div>
    9. </div>

    步骤 2:实现 'addTab' 函数

    1. function addTab(title, url){
    2. if ($('#tt').tabs('exists', title)){
    3. $('#tt').tabs('select', title);
    4. } else {
    5. var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="100%;height:100%;"></iframe>';
    6. $('#tt').tabs('add',{
    7. title:title,
    8. content:content,
    9. closable:true
    10. });
    11. }
    12. }

    我们使用 'exists' 方法来判断 tab 是否已经存在,如果已存在则激活 tab。如果不存在则调用 'add' 方法来添加一个新的 tab 面板。

    例子:

    <table id="HazardousId" class="easyui-datagrid" style="auto;height:500px;" ></table>

    <div id="shHazardous" style="padding:5px;height:auto">
    <div>
    <span class="other">
    废物类别代码: <input class="easyui-textbox HazardousWType" style="130px">
    </span>
    <span class="other">
    废物类别名称: <input class="easyui-textbox HazardousWTypeD" style="130px">
    </span>
    <span class="other">
    行业来源: <input class="easyui-textbox industrySources" style="130px">
    </span>
    <span class="other">
    废物代码: <input class="easyui-textbox HazardousWCode" style="130px">
    </span>
    <span class="other">
    危险废物: <input class="easyui-textbox HazardousWDis" style="130px">
    </span>
    <span class="other">
    危险特性: <input class="easyui-textbox HazardousWFeatures" style="130px">
    </span>
    <a id="searchbtn" href="#" class="easyui-linkbutton searchbtn" iconcls="icon-search">Search</a>
    </div>
    <div>

    ESc  浮框退出      table 自适应浏览器窗口

    $(function () {
    document.onkeyup = function (e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (code == 27) {
    $('#dlg').dialog('close');
    }
    }
    $(window).resize(function () {
    $('#V3CompanyApplyId').datagrid('resize', {
    height: ($(window).height())
    });
    });
    });

    $(function () {
    var tableId = "HazardousId";
    var controller = "Hazardous";
    var urlGetTbById = "/" + controller + "/GetHazardousWById";
    var urlGetTbOption = "/" + controller + "/MeasurementCalculateOption";

    //搜索功能string是类型,strWhere是变量,1=1 是常量,这个本身是没有什么意义的,只是为了方便在后面加上if(字段1 !=“”)
    //strWhere +=“ and 字段1 = ”;
    //if(字段2 !=“”)
    //strWhere +=“ and 字段2 = ”;
    //......         

    //如果字段都为空 还有 where 1=1 呢 也不影响查询,如果 只剩下where 不就报错了么..

    $('#shHazardous .searchbtn').on('click', function () {
    var strWhere = " 1=1 ";
    if ($('.other .HazardousWType').val() != "") {
    strWhere += "and T.HazardousWType like '%" + $('.other .HazardousWType').val() + "%'";
    }
    if ($('.other .HazardousWTypeD').val() != "") {
    strWhere += "and T.HazardousWTypeD like '%" + $('.other .HazardousWTypeD').val() + "%'";
    }
    if ($('.other .industrySources').val() != "") {
    strWhere += "and T1.industrySources like '%" + $('.other .industrySources').val() + "%'";
    }
    if ($('.other .HazardousWCode').val() != "") {
    strWhere += "and T2.HazardousWCode like '%" + $('.other .HazardousWCode').val() + "%'";
    }
    if ($('.other .HazardousWDis').val() != "") {
    strWhere += "and T2.HazardousWDis like '%" + $('.other .HazardousWDis').val() + "%'";
    }
    if ($('.other .HazardousWFeatures').val() != "") {
    strWhere += "and T2.HazardousWFeatures like '%" + $('.other .HazardousWFeatures').val() + "%'";
    }
    console.log(strWhere);
    $('#' + tableId).datagrid("reload", { strWhere: strWhere, page: 1, rows: 10 });
    });

    var StorageManager = [
    {
    type: 1,
    key: "HazardousWType",
    name: "废物类别代码",
    val: "",
    dpData: ""
    },
    {
    type: 1,
    key: "HazardousWTypeD",
    name: "废物列别名称",
    val: "",
    dpData: ""
    },
    {
    type: 1,
    key: "industrySources",
    name: "行业来源",
    val: "",
    },
    {
    type: 1,
    key: "HazardousWCode",
    name: "废物代码",
    val: "",
    },
    {
    type: 1,
    key: "HazardousWDis",
    name: "危险废物",
    val: "",
    },
    {
    type: 1,
    key: "HazardousWFeatures",
    name: "危险特性",
    val: "",
    }];


    function UIModifyInit(index, type) {
    $.ajax({
    url: rootUrl + urlGetTbById,
    data: { id: index },
    async: false,     //false为同步         默认是true;
    type: "POST",
    success: function (msg) {
    //alert(msg);
    //msg = $.parseJSON(msg);
    if (msg.success = true) {
    console.log(msg);
    dataOption.msgToModelCompany($.parseJSON(msg.Memo)[0], StorageManager, 1);
    dataOption.createDom(StorageManager, "userInfoSelect", type);

    }
    else {
    // console.log(msg.msg);
    }
    },
    dataType: "json"
    });

    };
    $('#' + tableId).datagrid({
    height: 500,
    url: rootUrl + '/' + controller + '/GetHazardousW',
    method: 'post',
    fixColumnSize: true,       // 固定列的尺寸
    striped: true,                 // 就把行条纹化。(即奇偶行使用不同背景色)
    fitColumns: true,           //自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
    fit: true,                       //折叠容器的大小将填充父容器   自适应
    singleSelect: false,         //设置为 true,则只允许选中一行。
    rownumbers: true,          //显示带有行号的列
    pagination: true,             //True 就会在 datagrid 的底部显示分页栏
    nowrap: false,                 //超出部分换行
    pageSize: 20,                   //初始化页码尺寸
    pageList: [10, 20, 50, 100, 150, 200],         //初始化页面尺寸的选择列表
    showFooter: true,              
    pageNumber: 1,           //初始化页码。
    toolbar: '#shHazardous',
    columns: [[
    { field: 'HazardousWType', title: '废物类别代码', '10%', align: 'center', fixed: 'true' },
    { field: 'HazardousWTypeD', title: '废物类别名称', '15%', align: 'center', fixed: 'true' },
    { field: 'industrySources', title: '行业来源', '15%', align: 'center', fixed: 'true' },
    { field: 'HazardousWCode', title: '废物代码', '10%', align: 'center', fixed: 'true' },
    { field: 'HazardousWDis', title: '危险废物', '40%', align: 'center', fixed: 'true' },
    { field: 'HazardousWFeatures', title: '危险特性', '10%', align: 'center', fixed: 'true' },
    //{
    // field: 'Id', title: '详细信息', '10%', align: 'center',
    // formatter: function (value, row, index) {
    // var addHtml = '<a class="approveApply ob-details" ob-id=' + row.id + ' style="color:blue">详细信息</a>';
    // return addHtml ;
    // }
    // },
    ]],
    onDblClickRow: function (rowIndex, rowData) {
    $('#dlg').dialog('open');
    UIModifyInit(rowData.id, 1);
    $('.ob-addBtn').remove();
    }
    });
    $('#' + tableId).prev().on("click", ".ob-details", function () {
    $('#dlg').dialog('open');
    UIModifyInit($(this).attr("ob-id"), 1);
    $('.ob-addBtn').remove();
    });
    });
    </script>

  • 相关阅读:
    高级特性(4)- 数据库编程
    UVA Jin Ge Jin Qu hao 12563
    UVA 116 Unidirectional TSP
    HDU 2224 The shortest path
    poj 2677 Tour
    【算法学习】双调欧几里得旅行商问题(动态规划)
    南洋理工大学 ACM 在线评测系统 矩形嵌套
    UVA The Tower of Babylon
    uva A Spy in the Metro(洛谷 P2583 地铁间谍)
    洛谷 P1095 守望者的逃离
  • 原文地址:https://www.cnblogs.com/sjd1118/p/7029191.html
Copyright © 2011-2022 走看看