EasyUI的datagrid弹框编辑的问题

发布网友发布时间：2022-04-25 23:49

共1个回答

热心网友时间：2022-04-08 07:12

给个我们项目里的一个文件给你参考下吧

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
    <% String path=request.getContextPath(); String basePath=request.getScheme()
    + "://" + request.getServerName() + ":" + request.getServerPort() + path
    + "/"; %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/cloudmgr.css" />
    <script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/public.js"></script>
<script type="text/javascript" src="<%=basePath%>pages/cloudmgr/dict.js"></script>
<style type="text/css">
.texthgt{
height:60px !important;
}
</style>
</head>
<body scroll="no">
    <table id="datagrid"  class="easyui-datagrid" data-options="rownumbers:true,
fitColumns:true,
singleSelect:false,
toolbar:'#tb',
height:540,
loadMsg:'数据加载中,请稍后...',
url:'dictAction.do?action=getAllDicts',
method:'post'" title="集群字典管理">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true">选择</th>
                <th data-options="field:'id',width:80">ID</th>
                <th data-options="field:'type',width:80">类型</th>
                <th data-options="field:'key',width:80">键</th>
                <th data-options="field:'value',width:80">值</th>
                <th data-options="field:'value2',width:80">值2</th>
                <th data-options="field:'desc',width:80">描述</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
类型 : <input class="easyui-textbox toolbar-text" id="search_dictid" style="width:110px">
        <a href="#" class="easyui-linkbutton search-button" id="search">查  询</a>
        <a href="#" class="easyui-linkbutton operate-button" id="delete">删除</a>
        <a href="#" class="easyui-linkbutton operate-button" id="modify">修改</a>
        <a href="#" class="easyui-linkbutton operate-button" id="add">增加</a>
    </div>
    <div id="edit-window" title="编辑">
        <div style="padding: 10px 60px 20px 60px;">
            <form id="ff" method="post">
            <table cellpadding="5">
                <tr>
                    <td>类型:</td>
                    <td><input class="easyui-textbox" type="text" id="edit_type" name="search.type" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>键:</td>
                    <td><input class="easyui-textbox" type="text" id="edit_key" name="search.key" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>值:</td>
                    <td><input class="easyui-textbox" type="text" id="edit_value" name="search.value" data-options="required:true,multiline:true"></input></td>
                </tr>
                <tr>
                    <td>值2:</td>
                    <td><input class="easyui-textbox" type="text" id="edit_value2" name="search.value2" data-options="required:false"></input></td>
                </tr>
                <tr>
                    <td>描述:</td>
                    <td><input class="easyui-textbox" type="text" id="edit_desc" name="search.desc" data-options="required:false,multiline:true"></input></td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton form-button" id="submitForm">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton form-button" id="clearForm">清除</a>
        </div>
        </div>
    </div>
</body>
</html>

dict.js内容

//by weixj
$(function(){
$("#search").click(function(){
        var queryParams = $('#datagrid').datagrid('options').queryParams;
        queryParams.search_dictid = search_dictid.value;
        $("#datagrid").datagrid('reload');
    });

    $("input",$("#search_dictid").next("span")).keydown(function(event){
  var val = $(this).val();
  if(event.keyCode == 13){
    var queryParams = $('#datagrid').datagrid('options').queryParams;
        queryParams.search_dictid = val;
        $("#datagrid").datagrid('reload');
  }
});

    var $win = $('#edit-window').window({
    title: '字典编辑',
    width: 380,
    height: 400,
    top: ($(window).height() - 330) * 0.5,
    left: ($(window).width() - 380) * 0.5,
    shadow: true,
    modal: true,
    closed: true,
    minimizable: false,
    maximizable: false,
    collapsible: false
});

    var form = $win.find("form");

    $("#edit_value").siblings("span").addClass("texthgt");
$("#edit_value").siblings("span").children("textarea").addClass("texthgt");
    $("#edit_desc").siblings("span").addClass("texthgt");
$("#edit_desc").siblings("span").children("textarea").addClass("texthgt");

    $("#add").click(function(){
$win.window('open');
form.form('clear');
form.url='dictAction.do?action=addDict';
    });

    $("#submitForm").click(function(){
    form.form('submit', {
        url: form.url,
        success: function (data) {
            data = toJson(data);
            if(data.flag == 0){
                $("#datagrid").datagrid('reload');
                $win.window('close');
            }else{
                $.messager.alert('错误', data.flag, 'error');
            }
        }
    });
    });

    $("#clearForm").click(function(){
    form.form("clear");
    });

    $("#modify").click(function(){
    form.form("clear");
    var rows = $('#datagrid').datagrid('getSelections');
    if(rows.length == 0 || rows.length > 1){
    $.messager.alert('警告', '请选择一条记录!', 'warning');
    return;
    }
    var dictid = rows[0].id;
    $.ajax({
    url:'dictAction.do?action=getOneDict&search.dictid='+dictid,
    type:'POST',
    success:function(data){
    data = toJson(data);
    var dictinfo = data.dictInfo;
    $win.window('open');
    $("#edit_type").textbox('setValue',dictinfo.type);
    $("#edit_key").textbox('setValue',dictinfo.key);
    $("#edit_value").textbox('setValue',dictinfo.value);
    $("#edit_value2").textbox('setValue',dictinfo.value2);
    $("#edit_desc").textbox('setValue',dictinfo.desc);
    form.url='dictAction.do?action=modDict&search.dictid='+dictid;
    },
    error:function(){
    $.messager.alert('错误', '操作失败!', 'error');
    }
    });
    });

    $("#delete").click(function(){
    var rows = $('#datagrid').datagrid('getSelections');
    if(rows.length == 0){
    $.messager.alert('警告', '请至少选择一条记录!', 'warning');
    return;
    }
    $.messager.confirm("操作提示", "您确定要删除这些字典吗？", function (data) {
            if(data){
            var dictids='';
    for(var i=0;i<rows.length;i++){
    if(i>0){
    dictids += ",";
    }
    dictids += rows[i].id;
    }
    $.ajax({
    url:'dictAction.do?action=delDict&search.dictid='+dictids,
    type:'POST',
    success:function(data){
    data = toJson(data);
            if(data.flag == 0){
                $("#datagrid").datagrid('reload');
            }else{
                $.messager.alert('错误', data.flag, 'error');
            }
    },
    error:function(){
    $.messager.alert('错误', '操作失败!', 'error');
    }
    });
            }
        });
    });
})