SNF快速開發平台MVC-進階查詢組件

標籤：ons   number   userinfo   creat   產生   1.3   -o   range   numbers   

1.   進階查詢

在我們做項目的時候經常想要按名稱、編號進行查詢資料，可在開發時會把最常用的查詢條件寫上，不常用的就不寫了，也是因為把所有欄位都寫上太多了，布局不好看而且不實用。還有些查詢條件幾百年用那麼一次，也不能用到時調整一下程式。基於這些考慮我們做的一個進階查詢組件，可以把所有列都作為查詢條件，把最常用的查詢條件還正常放在頁面上。點擊進階查詢按鈕後，會有所以列作為篩選條件方便進行尋找，別如果本次條件比較多還可以儲存起來為一個查詢方案，下次時可以方便重新查詢。

1.1.      效果展示

圖 2.1

進階查詢頁面 

圖 2.2

進階查詢管理頁面 

圖 2.3

1.2.      調用說明1.2.1.    添加進階查詢的公用js引用

    <script src="~/Content/js/core/common.advanced_query.js"></script>

1.2.2.    定義查詢事件

在定義查詢的表格對象後，定義查詢事件。下邊的self.grid是datagrid的綁定對象。

this.executeQueryClick = function (post){

    self.grid.queryParams($.extend(ko.toJS(self.queryForm), post));

}

1.2.3.    給表格綁定進階查詢

通過下邊的方式可以綁定進階查詢，可以自動產生快速查詢欄以及進階查詢、清空的按鈕

 

//通過拼html的方法，把選中的grid放進一個layout的center中，上方添加一個north，裡邊渲染快速查詢方案以及方案配置的按鈕

//_param = {

    //gridName:"grid" //datagrid的id值

    //grid:self.grid //需要進階查詢的datagrid綁定對象

    //_url:"/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery" //當前頁面路徑

    //searchFunc:self.executeQueryClick //對應viewModel中的this.executeQueryClick方法

    //flagSession:false //true表示從頁面讀取datagrid的editor屬性自動產生查詢列，false表示手動填寫查詢列

    //flagCollapsed:true //true載入時查詢欄展開，false表示合死，預設true

    //GridViewName:"grid" //使用資料庫中GridViewName存入值為GridViewName的資料進行進階查詢，方便對現有資料進行處理，以及與cs程式互連。預設等於gridName，如為此值賦值，注意要同時修改controller中的查詢資料行繫結值

//}

snf.advancedQueryLayout({

    gridName:"grid",

    grid :self.grid,

    _url: "/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery",

    searchFunc :self.executeQueryClick,

    flagSession :false,

    flagCollapsed: true

    //GridViewName:"grid"

});

此方法應當在定義self.grid之後調用！

1.2.4.    如果不需要快速查詢欄

通過此種方式可單獨添加一個進階查詢按鈕，首先定義一個按鈕，標籤添加屬性data-bind="click:advancedQueryClick"

this.advancedQueryClick=function(){

    //只需要進階查詢按鈕，不需要快速查詢欄時，調用此方法,參數如下，每個參數含義可參考2.2.3

    snf.AdvancedQueryButtonClick({

        gridName:"grid",

        grid :self.grid,

        _url: "/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery",

        searchFunc :self.executeQueryClick,

        flagSession :true,

        //GridViewName:"grid"

    });

}

1.2.5.    添加進階查詢條件

flagSession=true時，會直接從editor中讀取進階查詢條件，如果flagSession=false，則要手動在controller中添加查詢條件，代碼如下

#region 擷取進階查詢的控制項類型

 [MvcMenuFilter(false)]

public dynamic GetAdvancedQueryColumns(RequestWrapper request)

{

    var list = new List<KeyValuePair<string, object>>();

    list.Add(new KeyValuePair<string, object>("grid", new object[]{

        new string[]{ "DemoSingleTable.Code", "編號", "validatebox" },

        new object[]{ "DropDownSingle", "資料字典", "combobox", this.GetItemsListCategoryBs("ItemsGender", "ItemCode", "ItemName")},

        //new object[]{ "a", "a", "combotree",  SNFService.Instance.BaseItemDetailsService.GetDataTable(this.UserInfo, "ItemsTreeTest")},

        new string[]{ "Num", "數量", "numberbox", "min:0,precision:2" },

        new string[]{ "Money", "金額", "numberspinner", "min:0,precision:2" },

        new string[]{ "IsCheckbox", "複選框", "checkbox" },

        new string[]{ "DateBox", "日期", "daterange" },

        new string[]{ "ApproveState", "狀態", "lookup", "lookupType:‘ItemsAuditStatus‘" }

    }));

    return list.Find(s => s.Key == request["GridViewName"]).Value;

}

#endregion

 

此方法應寫在BaseApiController的繼承類下

其中參數

list是一個列表，裡邊可以包含多個索引值對，每個鍵都對應著一個表格控制項。

每個索引值對代表一個表格的進階查詢繫結，索引值對的key是綁定進階查詢的表格的id值，索引值對的value是一個object對象，包含對應表格的全部的進階查詢所需的查詢條件。此方法會自動根據表格id進行匹配，返回當前表格進階查詢所需的查詢條件列表。每個返回的查詢條件對象中，可根據實際情況包含三到四個元素，主要控制項類型不同有所區分。

注意：js當中advancedQueryClick方法的參數gridName與上面方法list的key值"grid"還有request["GridViewName"]要保持一致。

第一個元素：列名。對應資料庫中的欄位，多表查詢時可輸入表名.列名，如DemoSingleTable.Code

第二個元素：查詢條件中文名，如：編號

第三個元素：控制項類型，現在支援validatebox（文字框），combobox（下拉），

numberbox（數字框），numberspinner（數字微調框），checkbox（複選框），daterange（日期範圍），lookup（彈框控制項），combotree（下拉樹）

第四個元素：擴充屬性，對combobox、combotree來說，第四個值傳下拉需要展示的資料來源；對numberbox，numberspinner，lookup來說，第四個元素之間寫easyui控制項的data-options裡邊需要填寫的內容即可（可以參考easyui1.3.2的api）；validatebox，daterange，checkbox不需要第四個元素

1.2.6.    在controller裡的查詢方法增加拼接查詢條件的方法

SNFService.Instance.CreateService<BaseUserQuerysService, IBaseUserQuerysService>().GetParamQueryById(UserInfo, request, ref pQuery);

 

圖 2.4

1.2.7.    demo範例

程式路徑：

/DEMO/ DemoSingleTableAdvancedQuery /DemoSingleTableAdvancedQuery

可在程式中按照此路徑增加菜單查看

1.1.      注意事項

一、如果多表查詢的進階查詢，需要將flagSession定義為false，並且在controller中定義的對象中，把每一列定義為 表名.列名

，畫框部分為應當使用的寫法

 

圖 2.5

 

二、一個頁面多個表格用到進階查詢時，如果有多個表格需要在同一controller中進行進階查詢的調用，請將各個表格的id值取成不同的，無論是否出現在同一cshtml頁面中。調用時，每一表格需在圖2.5的GetAdvancedQueryColumns方法中單獨添加一段查詢條件的代碼。如，我們還有一個id為gridlist的表格也要進行進階查詢，那麼就在return的前一行加上如下代碼：

list.Add(new KeyValuePair<string, object>("gridlist", new object[]{

        new string[]{ "DemoSingleTable.Code", "編號", "validatebox" },

        new object[]{ "DropDownSingle", "資料字典", "combobox", this.GetItemsListCategoryBs("ItemsGender", "ItemCode", "ItemName")},

        //new object[]{ "a", "a", "combotree",  SNFService.Instance.BaseItemDetailsService.GetDataTable(this.UserInfo, "ItemsTreeTest")},

        new string[]{ "Num", "數量", "numberbox", "min:0,precision:2" },

        new string[]{ "Money", "金額", "numberspinner", "min:0,precision:2" },

        new string[]{ "IsCheckbox", "複選框", "checkbox" },

        new string[]{ "DateBox", "日期", "daterange" },

        new string[]{ "ApproveState", "狀態", "lookup", "lookupType:‘ItemsAuditStatus‘" }

    }));

 

SNF快速開發平台MVC-進階查詢組件