Xiaomei のコーディング日記 (2) - MVC+Jqgrid_html/css_WEB-ITnose に基づいた最初のリスト ページ

1. はしがき

「ニマ兄さん、先週、あなたは私に OA システムの UI を変更する方法を教えてくれました。黄さんはそれに非常に満足していました。」
「悪くない、Xiaomei は大きな進歩を遂げ、この問題を終わらせることができるようだ。」
「ニマ兄さん、ガールフレンドはいますか？」

「シャオメイ、これは良くありません、私はとても良いのに、あなたは」 「でも、私はあなたに何か意図があってプログラミングを教えているわけではありません！ もちろん、あなたがそうしなければならないなら、私は従うしかありません。あなたがそんなにケチであるのはおかしいです。」ところで、私たちの OA システムは .net WebForm でしたが、そのテーブルはすべて MVC で見つかりませんでした。 "

"そうですね、gridview はサーバー コントロールです。ビュー内で直接使用することはできません。また、サーバー コントロールを使用するときのユーザー エクスペリエンスは良くありません。今回は、js である jqgrid を使用するという新しいことを教えます。オープンソースのテーブルです。プラグインは軽量で、制御が簡単で、効果は非常に優れています。公式 Web サイトと他のプロジェクトで使用した結果を紹介します。」

Jqgrid 公式 Web サイト: http://www.trirand.com/blog/

「ニマ兄さん、一体何をしているのですか？ インターフェースは元々とても素晴らしいのに、なぜモザイクをかけているのですか？ モザイクがゲームの進行に深刻な影響を与えていることを知らないのですか？」人類？「

」シャオメイ、そんなことは気にしないでください。ブログパークはみんなが知識を学ぶ場所なので、会社についてのいくつかのことをコーディングしました。要はみんなで技術を学ぶことです。チャン先生を見てください。ムービーがコーディングされていない場合、他の人も同じことをします。「

2. MVC での Jqgrid の使用

」「ニーマ兄弟、jqgrid は JS プラグインです。どのように使用できますか。」 MVC と組み合わせて? "

"Xiaomei さん、理解できないかもしれませんが、基本的なデータの作成方法、「部門管理」の方法、そして jqgrid の挿入方法を段階的に説明します。 "

"Jqgrid を使用すると、データの表示が非常に簡単になります。このプラグインを導入した後は、Json データ パケットをフィードするだけで、美しいデータ リストが表示されます。

「ニマ兄弟、昨日 MVC をチェックしました。実際にはモデル、ビュー、コントロールです。モデルはエンティティであり、ビューはデータの表示に使用され、コントロールは主にフロントエンドとバックエンド間の対話を制御します。そして、この Jqgrid プラグは、 「

」賢い​​、私はあなたにそれを説明する方法を考えていたので、それはいいです、シャオメイ。コントローラーが生成され、コントローラーはバックエンドから部門リストを取得し、それを Json に変換してフロントエンドに渡す必要があると思います。コードは、あなたが書くように教えた Json のように記述されます。前回のメニューが機能するかどうかを確認してください。 「

/// <summary>    /// 部门管理控制器    /// </summary>    public class DepartmentController : PublicController<Base_Department>    {        Base_DepartmentBll base_departmentbll = new Base_DepartmentBll();        /// <summary>        /// 【部门管理】返回列表JONS        /// </summary>        /// <returns></returns>        public ActionResult GridListJson(JqGridParam jqgridparam)        {            DataTable ListData = base_departmentbll.GetList(ref jqgridparam);            return Content(ListData.ToJson());        }    }    /// <summary>    /// 部门管理    /// <author>    ///        <name>she</name>    ///        <date>2014.08.07 12:34</date>    /// </author>    /// </summary>    public class Base_DepartmentBll : RepositoryFactory<Base_Department>    {            /// <summary>        /// 获取部门 列表        /// </summary>        /// <param name="jqgridparam"></param>        /// <returns></returns>        public DataTable GetList( ref JqGridParam jqgridparam)        {            StringBuilder strSql = new StringBuilder();            strSql.Append(@"SELECT  *                            FROM    ( SELECT    d.DepartmentId ,            --主键                                                c.FullName AS CompanyName ,    --所属公司                                                d.CompanyId ,                --所属公司Id                                                d.Code ,                    --编码                                                d.FullName ,                --部门名称                                                d.ShortName ,                --部门简称                                                d.Nature ,                    --部门性质                                                d.Manager ,                    --负责人                                                d.Phone ,                    --电话                                                d.Fax ,                        --传真                                                d.Enabled ,                    --有效                                                d.SortCode,                 --排序吗                                                d.Remark                    --说明                                      FROM      Base_Department d                                                LEFT JOIN Base_Company c ON c.CompanyId = d.CompanyId                                    ) T WHERE 1=1 ");            List<DbParameter> parameter = new List<DbParameter>();            return Repository().FindTablePageBySql(strSql.ToString(), parameter.ToArray(), ref jqgridparam);            return Repository().FindTableBySql(strSql.ToString(), parameter.ToArray());        }    }

「悪くない、あなたは強い学習能力を持っています、シャオメイ、あなたはこの点で私によく似ています！」 「

」ニマ兄さん、GetList 関数に ref JqGridParam jqgridparam パラメータがありますが、それは何に使うのですか？ "

"Xiaomei、FindTablePageBySql という最後のメソッドを見てください。このメソッドには Page という単語が含まれています。これは明らかにページングに使用されます。さらに、このようなパブリック メソッドに出会ったときに、単に F12 キーを押して確認するだけでなく、多くのコードを理解できるようになります。発達。 "

"それでは、View レイヤーのコードの書き方を教えましょう。実は、私も公式のデモで学びました。これからは日本の映画だけでなく、ヨーロッパやアメリカの映画も見て、英語の資料も理解できるようになり、スキルアップにつながります。 「

@{    ViewBag.Title = "部门管理";}<!--框架必需start--><link href="~/Content/Styles/learunui-framework.css" rel="stylesheet" /><script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script><script src="~/Content/Scripts/learunui-framework.js"></script><!--框架必需end--><!--jqgrid表格组件start--><script src="~/Content/Scripts/jqgrid/jquery-ui-custom.min.js"></script><script src="~/Content/Scripts/jqgrid/grid.locale-cn.js"></script><link href="~/Content/Scripts/jqgrid/css/jqgrid.css" rel="stylesheet" /><script src="~/Content/Scripts/jqgrid/jqGrid.js"></script><!--表格组件end--><link href="~/Content/Scripts/tree/tree.css" rel="stylesheet" /><script src="~/Content/Scripts/tree/tree.js"></script><script type="text/javascript">    $(document).ready(function () {        GetGrid("");    });    //加载表格    function GetGrid(CompanyId) {        $("#gridTable").jqGrid({            url: "/Department/GridListJson",            datatype: "json",            height: $(window).height() - 105,            autowidth: true,            colModel: [                { label: '主键', name: 'departmentid', index: "departmentid", hidden: true },                { label: '编码', name: 'code', index: "code", width: 80 },                { label: '部门', name: 'fullname', index: "fullname", width: 100 },                { label: '简称', name: 'shortname', index: "shortname", width: 100 },                { label: '性质', name: 'nature', index: "nature", width: 100, align: "center" },                { label: '负责人', name: 'manager', index: "manager", width: 80, align: "center" },                { label: '电话', name: 'phone', index: "phone", width: 100, align: "center" },                { label: '传真', name: 'fax', index: "fax", width: 100, align: "center" },                { label: '所属公司', name: 'companyname', index: "companyname", width: 120 },                {                    label: '有效', name: 'enabled', index: 'enabled', width: 45, align: 'center',                    formatter: function (cellvalue, options, rowObject) {                        if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";                        if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";                    }                },                { label: '说明', name: 'remark', index: "remark", width: 300 }            ],            pager: "#gridPager",            sortname: 'SortCode',            sortorder: 'asc',            rownumbers: true,            shrinkToFit: false,            gridview: true,        });    }</script><div id="layout" class="layout">    <div class="layoutPanel layout-center">        <div class="btnbartitle">            <div>                部门列表<span id="CenterTitle"></span>            </div>        </div>        <table id="gridTable"></table>        <div id="gridPager"></div>    </div></div>

」 ニマ兄さん、フロントエンドとバックエンドのやり取りには AV テクノロジーが必要だと前に言いましたが、なぜここに Ajax 呼び出しの痕跡が見られないのでしょうか。

「シャオメイ、またバカなの？この恥ずかしい映画をまだオフィスのような場所で見ているの？ Jqgrid はプラグです。もちろんカプセル化されています。ご覧ください。そこに URL パラメーターがあることがわかります。これをコントローラー内のアクションにポイントして Json を取得し、Jqgrid が返された Json を取得できるようにします。 "

"ああ、どうやらカプセル化されていることがわかりました。そうすると、gridPager ページングもバックグラウンドでカプセル化されている必要があります。そうしないと、リストにまったく接続されません。 「

」はい、Xiaomei は非常に賢いものです。時間があれば、ぜひチェックしてみてください。このプラグインはまだ公開されています。 Baidu Netdisk で自分でダウンロードできます。 「

ソースコードのダウンロードアドレス: http://pan.baidu.com/s/1gdiVKJp

」ニマ兄さん、なぜあなたが私にくれたソースコードは上の写真と少し違うのですか？行方不明のまま？ツールバーもありません。 ”

”シャオメイ、私はあなたに言いました、一歩ずつ、時間をかけて、まずこのフォームに記入しなければなりません、そして残りは来週教えます。 「

」