MVC3 में WebGrid के कॉलम में विशिष्ट चौड़ाई लागू

Question

मैं का इस्तेमाल किया है WebGrid इनबिल्ट छंटाई और MVC आवेदन में पेजिंग के लाभ लेने के लिए और यह बहुत अच्छी तरह से सिर्फ एक ही मुद्दा मैं ठीक नहीं कर सकता है और यहां किसी की मदद

की तलाश में काम किया है मेरे webgrid की तरह के रूप में प्रति नीचे

@{ 
     var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10); 
     grid.Pager(WebGridPagerModes.NextPrevious); 
     @grid.GetHtml(columns: grid.Columns(

     grid.Column("Name", "Name", canSort: true), 
     grid.Column("Address", "Address", canSort: true),   
     //other columns 
     )); 
    } 

कैसे मैं अपने आवश्यकता के अनुसार हर कॉलम की चौड़ाई तय कर सकते हैं देखने के लिए है? (अलग कॉलम के लिए अलग अलग चौड़ाई की जरूरत है)

Answer 1

आप शैलियों इस्तेमाल कर सकते हैं:

@grid.GetHtml(columns: grid.Columns(
    grid.Column("Name", "Name", canSort: true, style: "name"), 
    grid.Column("Address", "Address", canSort: true, style: "address") 
)); 

और अपने सीएसएस फ़ाइल में:

.name { 
    width: 50px; 
} 

.address { 
    width: 300px; 
} 

Answer 2

केवल सीएसएस

/*IE7+*/ 
th:first-child { width:30px; } 
th:first-child + th { width:30px; } 
th:first-child + th + th { width:100px; } 
/*IE9 +*/ 
th:nth-of-type(1) { width:30px; } 
th:nth-of-type(2) { width:30px; } 
th:nth-of-type(3) { width:100px; } 
th:nth-of-type(4) { width:200px; } 
th:nth-of-type(5) { width:40px; } 

Answer 3

में जोड़ने के लिए डारिन डिमिट्रोव की अच्छी सलाह, आगे एक सम्मेलन की सिफारिश करेगी (चूंकि सीएसएस पुन: उपयोग को बढ़ावा देता है), कोशिश करें अक्सर उपयोग किए जाने वाले तत्वों (उदाहरण के लिए, कॉलम) के लिए मौजूदा या सामान्य शैलियों का उपयोग करें - याद रखें कि आप यहां एक स्थान से अलग कई शैलियों को भी लागू कर सकते हैं - वे केवल परिणामस्वरूप विशेषता में विलय हो जाएंगे।

@{ 
    var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10); 
    grid.Pager(WebGridPagerModes.NextPrevious); 
    @grid.GetHtml(columns: grid.Columns(

    grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"), 
    grid.Column("Address", "Address", canSort: true, style: "col-med address"),   
    //other columns 
    )); 

}

/*styles*/ 
.col-sm { width: 100px; min-width: 90px; } 
.col-med { width: 150px; min-width: 120px; } <--could be reused 
.address { font-weight: bold; } <-- could be reused 
.cssOther3 { font-weight: bold; } <-- may not be as not as reusable 
.cssStyle2 { text-align: right; } 

तो, दूसरे शब्दों में, आप एक ही शैली पैकेज के साथ अटक नहीं कर रहे हैं एक विकल्प होता है करने के लिए जब "पुन: उपयोग" को लागू करने के लिए जारी रखें।