如何在asp.net mvc中更改Jtable的edit pop css属性答案

【问题标题】：how to change the edit pop css property of Jtable in asp.net mvc如何在asp.net mvc中更改Jtable的edit pop css属性
【发布时间】：2014-09-08 17:21:11
【问题描述】：

我在项目中添加了下面的 jtable 引用，但我的编辑弹出和删除弹出的行为非常奇怪。我正在搜索并浏览许多关于如何修复问题的教程，但由于我对 Jtable 非常陌生，我在修复 Jtabel 的编辑弹出设计时遇到了困难。谁能帮助我如何使编辑弹出外观和感觉？

我的看法：

![<!doctype html>
<html lang="en">
<head>
    @{
        @model abcFinal.Models.AdminCatgMgmt
        ViewBag.Title = "Process Manager :: Admin Category Manager";
    }
    <meta charset="utf-8">
    <title>Process Manager :: Admin Category Manager</title>
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery-1.10.2.js"></script>
    <script src="~/Content/js/jquery-ui.js"></script>
    <link href="~/Scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" />
    <script src="~/Scripts/jtable/jquery.jtable.js"></script>
    <link href="~/Content/style.css" rel="stylesheet" />
    <!-- Include one of jTable styles. -->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />

<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

    @*<script src="~/scripts/adminorders/adminorders.js"></script>*@
    @*<script src="~/Scripts/jtable/localization/jquery.jtable.tr.js"></script>*@
    @*<script src="~/Content/AdminCategories/masinCategory.js"></script>*@

</head>
<body>

    <br />
    <h1>Process Manager :: Admin Category Manager</h1>
    <br />
    <div id="tabs" class =".mytab">
        <ul>
            <li><a href="#tabs-1">Main Category</a></li>
            <li><a href="#tabs-2">Sub Category</a></li>
            <li><a href="#tabs-3">Country</a></li>
            <li><a href="#tabs-4">State</a></li>
            <li><a href="#tabs-5">City</a></li>
            <li><a href="#tabs-6">Shipping</a></li>
            <li><a href="#tabs-7">Extra Services</a></li>
            <li><a href="#tabs-8">S-Category</a></li>
        </ul>
        <div id="tabs-1">
            <div id="mainCategoryTableContainer" style ="width:770px;margin-left:70px;margin-top:30px">
            </div>
        </div>
        <div id="tabs-2">
            <div id="subCategoryTableContainer" style ="width:770px;margin-left:70px;margin-top:30px">
            </div>
        </div>
        <div id="tabs-3">
            <div id="countryTableContainer" style ="width:770px;margin-left:70px;margin-top:30px">
            </div>
        </div>
        <div id="tabs-4">
            <div id="stateTableContainer" style ="width:800px;margin-left:70px;margin-top:30px">
            </div>
        </div>
        <div id="tabs-5">
            <div id="cityTableContainer" style ="width:800px;margin-left:70px;margin-top:30px">
            </div>
        </div>
        <div id="tabs-6">

        </div>
        <div id="tabs-7">

        </div>
        <div id="tabs-8">

        </div>
    </div>

    <script type="text/javascript">
        $(function () {

            $("#tabs").tabs(
            {
                collapsible: true

            });

            //$(".my_tab").bind("click", handle_tab_click)

            $('#mainCategoryTableContainer').jtable({
                title: 'Main Category list',
                paging: true,
                pageSize: 10,
                sorting: true,
                defaultSorting: 'subcatname ASC',
                actions: {
                    listAction: '@Url.Action("getMainCategory")',
                    deleteAction: '@Url.Action("DeleteMainCategory")',
                    updateAction: '@Url.Action("EditMainCategory")',
                    createAction: '@Url.Action("AddMainCategory")'

                },
                fields: {
                    catid: {
                        title: 'Main Category Id',
                        width: '10%',
                        create: false,
                        edit: false,
                        key: true,
                        list: true
                    },
                    catname: {
                        title: 'Category Name',
                        width: '20%',
                        //edit: false,
                        //key: true,

                    },
                    noofsubcat: {
                        title: 'No. of Sub Category',
                        width: '10%',
                        create: false,
                        edit: false,
                    },
                    catdate: {
                        title: 'Sub Category Date',
                        width: '20%',
                        edit: false,
                        create: false,
                    }
                }
            });
            $('#mainCategoryTableContainer').jtable('load');
 });
    </script>
</body>
</html>][1]

【问题讨论】：

标签： asp.net asp.net-mvc jquery-ui jqgrid jquery-jtable

【解决方案1】：

你能定义“行为很奇怪”吗？

刚刚遇到这个问题，正在寻找其他东西，快速浏览一下，我要做的第一件事就是只包含一个 jtable 实例，而不是两个：

<script src="~/Scripts/jtable/jquery.jtable.js"></script>

... 和 ...

<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

您只需要一个（包括 2 个）文件，虽然是缩小版本，但您将创建双重实例化的可能性。

【讨论】：